import { ref, watch } from 'vue'

import type { Playlist } from '../types'
import { SwitchInput } from './SwitchInput.vine'

export const EditPlaylistModal = ({
  playlist,
  mode = 'edit',
}: {
  playlist: Playlist,
  mode?: 'create' | 'edit',
}) => {
  const emit = vineEmits(['close', 'update-playlist', 'create-playlist'])

  const
    local = ref(playlist ?? {
      name: '',
      comment: '',
      isPublic: false
    }),

    save = () => {
      if (!local.value.name?.trim()) {
        alert('Name cannot be empty')
        return
      }

      if (mode !== 'edit') {
        emit('create-playlist', local.value.name)
      } else {
        emit('update-playlist', { ...local.value })
      }

      emit('close')
    }

  watch(
    () => playlist,
    (newVal) => {
      local.value = newVal ?? {
        name: '',
        comment: '',
        isPublic: false
      }
    },
    { immediate: true }
  )

  return vine`
    <Teleport to="#dialogBoxes">
      <dialog open @click="$emit('close')">
        <article @click.stop>
          <h2>{{ mode === 'edit' ? 'Edit Playlist' : 'New Playlist' }}</h2>
          <form>
            <fieldset>
              <label>
                Name
                <input v-model="local.name" type="text">
              </label>
              <label v-if="mode === 'edit'">
                Comment
                <textarea v-model="local.comment" class="form-control" />
              </label>
              <label v-if="mode === 'edit'">
                <SwitchInput v-model="local.isPublic" />
                Public
              </label>
            </fieldset>
            <footer>
              <button @click.stop="$emit('close')">
                Cancel
              </button>
              <button @click.stop="save" class="contrast">
                {{ mode === 'edit' ? 'Save' : 'Create' }}
              </button>
            </footer>
          </form>
        </article>
      </dialog>
    </Teleport>
  `
}