<template>
  <div class="flex flex-col w-full h-full justify-center items-center">
    <div class="px-4 py-2 flex flex-col gap-4 flex-none">
      <div class="text-thin text-xl text-brave-5 dark:text-brave-95">Select directories</div>
    </div>

    <div class="grow flex flex-col items-center justify-center gap-8 w-full max-w-screen-sm">
      <div class="flex flex-col gap-2 w-full justify-center items-center">
        <div
          v-for="(directory, index) in directories"
          :key="directory"
          class="w-full bg-brave-90 dark:bg-brave-10 text-brave-5 dark:text-brave-95 font-bold p-4 rounded-lg flex items-center"
        >
          <div class="grow">
            {{ directory }}
          </div>
          <button
            class="flex-none button button-normal p-2 rounded-full"
            @click.prevent="removeDirectory(index)"
          >
            <Close />
          </button>
        </div>

        <button
          class="w-full bg-brave-95 dark:bg-brave-5 hover:bg-brave-90 hover:dark:bg-brave-10 active:bg-brave-80/50 transition text-brave-5 dark:text-brave-95 font-bold p-4 rounded-lg flex items-center border border-dashed border-brave-70 dark:border-brave-30"
          @click.prevent="chooseDirectory"
        >
          <Plus />
          <div>Add new directory</div>
        </button>
      </div>

      <button class="button button-primary w-full p-4 rounded-lg" @click.prevent="progressStep">
        Continue
      </button>
    </div>
  </div>
</template>

<script setup>
import { open } from '@tauri-apps/plugin-dialog'
import { audioDir } from '@tauri-apps/api/path'
import { invoke } from '@tauri-apps/api/core'
import { ref, onMounted } from 'vue'
import Close from '~icons/mdi/close'
import Plus from '~icons/mdi/plus'
const emit = defineEmits(['progressStep', 'directoriesChanged'])

const directories = ref([])
const originalDirectories = ref([])

const progressStep = async () => {
  await invoke('set_directories', { directories: directories.value })

  // Check if directories actually changed
  const hasChanged =
    JSON.stringify(originalDirectories.value.sort()) !== JSON.stringify(directories.value.sort())

  if (hasChanged) {
    emit('directoriesChanged')
  }

  emit('progressStep')
}

onMounted(async () => {
  const directoriesFromDB = await invoke('get_directories')
  if (directoriesFromDB && directoriesFromDB.length > 0) {
    directories.value = [...directoriesFromDB]
    originalDirectories.value = [...directoriesFromDB]
  } else {
    const dirPath = await audioDir()
    directories.value.push(dirPath)
    originalDirectories.value = [dirPath]
  }
})

const chooseDirectory = async () => {
  const selected = await open({
    directory: true,
    recursive: true,
  })

  if (selected && !directories.value.includes(selected)) {
    directories.value.push(selected)
  }
}

const removeDirectory = index => {
  if (index < 0) {
    return
  }
  directories.value.splice(index, 1)
}
</script>
