import { ref } from 'vue'
import { useMainStore } from '../store/main'

export const AboutDialog = ({ visible }: { visible: boolean }) => {
  vineEmits([ 'close' ])

  const
    mainStore = useMainStore(),
    gitUrl = ref(import.meta.env.VITE_GIT_URL),
    build = ref(''),
    buildDate = ref('')

  return vine`
    <dialog v-if="visible" open="true" @click="$emit('close')">
      <article @click.stop>
        <h2>{ insert logo here }</h2>
        <a :href="gitUrl" target="_blank" rel="noopener noreferrer">{{ gitUrl }}</a>
        <p>Licensed under the AGPLv3 license.</p>
        <div>Build: {{ build }}</div>
        <div>Build date: {{ buildDate }}</div>
        <div>Server name: {{ mainStore.serverInfo.name }}</div>
        <div>Server version: {{ mainStore.serverInfo.version }}</div>
        <div>
          Server URL:
          <a :href="mainStore.serverUrl" target="_blank" rel="noopener noreferrer">{{ mainStore.serverUrl }}</a>
        </div>
        <div>OpenSubsonic extensions: {{ mainStore.serverInfo.extensions.join(', ') }}</div>
      </article>
    </dialog>
  `
}