<script setup lang="ts">
import FormInput from '@/components/FormInput.vue'
import { ref } from 'vue'
import FormTextarea from '@/components/FormTextarea.vue'
import { useProjectsStore } from '@/stores/projects.ts'

const dialog = defineModel('dialog')

const projectsStore = useProjectsStore()

const name = ref('')
const description = ref('')
const key = ref('')

async function onSubmit() {
  console.log(name.value)
  await projectsStore.create({
    name: name.value,
    description: description.value,
    key: key.value,
  })
}
</script>

<template>
  <v-sheet border class="pa-4">
    <div class="d-flex align-center ga-4 mb-4">
      <v-btn variant="text" @click="dialog = false" icon="mdi-close"></v-btn>
    </div>
    <div class="mb-4">
      <div class="text-h6">Project type</div>

      <v-list lines="two">
        <v-list-item border rounded @click="console.log('Kanban')">
          <div class="d-flex ga-2">
            <div class="d-flex align-center">
              <v-icon size="64" color="primary">mdi-paper-roll-outline</v-icon>
            </div>

            <div>
              <div class="text-h6">Kanban</div>
              <div class="text-body-2">
                Kanban is all about helping teams visualize their work, limit work currently in progress, and maximize
                efficiency.
              </div>
            </div>
          </div>
        </v-list-item>
      </v-list>
    </div>
    <div class="mb-4">
      <div class="text-h6">Project details</div>
      <div class="text-caption">
        Required fields are marked with an asterisk <span class="text-error text-body-2">*</span>
      </div>
    </div>
    <v-form class="d-flex flex-column ga-4" @submit.prevent="onSubmit">
      <form-input v-model:value="name" label="Name" :required="true" />
      <form-input v-model:value="key" label="Key" :required="true" description="prefix for your project" width="50" />
      <form-textarea v-model:value="description" label="Description" :rows="2" />
      <v-btn type="submit" class="align-self-start" density="comfortable" color="primary">create</v-btn>
    </v-form>
  </v-sheet>
</template>

<style scoped lang="scss"></style>
