<script setup lang="ts">
    import { computed } from 'vue';
    import AppLayout from '@/layouts/AppLayout.vue';
    import { type BreadcrumbItem } from '@/types';
    import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
    import { Button } from '@/components/ui/button';
    import { Input } from '@/components/ui/input';
    import { Label } from '@/components/ui/label';
    import { Checkbox } from '@/components/ui/checkbox';
    import { Plus } from 'lucide-vue-next';

    interface Profile { id: string; name: string };
    interface Department { id: number; name: string };

    const page = usePage<{
        profiles: Profile[]
        departments: Department[]
    }>();

    const profiles    = computed(() => page.props.profiles);
    const departments = computed(() => page.props.departments);

    const form = useForm({
        project_name: '',
        project_number: '',
        user_ids:      [] as string[],
        department_ids:[] as number[],
    });

    // toggle a profile id in the user_ids array
    function toggleUser(id: string, checked: boolean) {
        if (checked) {
            form.user_ids.push(id);
        } else {
            form.user_ids = form.user_ids.filter(x => x !== id);
        }
    }

    // toggle a department id in the department_ids array
    function toggleDept(id: number, checked: boolean) {
        if (checked) {
            form.department_ids.push(id);
        } else {
            form.department_ids = form.department_ids.filter(x => x !== id);
        }
    }

    const breadcrumbs: BreadcrumbItem[] = [
        { title: 'Dashbord',   href: '/dashboard' },
        { title: 'Prosjekter', href: '/smartdok/projects' },
        { title: 'Opprett',    href: '/smartdok/projects/create' },
    ];

    function submit() {
        form.post(route('smartdok.projects.store'));
    }
</script>

<template>
    <Head title="Opprett prosjekt" />   
    <AppLayout :breadcrumbs="breadcrumbs">
      <div class="mb-6 flex items-center justify-between p-6">
        <h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
          Opprett prosjekt
        </h3>
      </div>    
      <div class="flex justify-center">
        <form
          @submit.prevent="submit"
          class="space-y-6 min-w-2xl lg:min-w-3xl xl:min-w-4xl"
        >
          <!-- Prosjektnavn -->
          <div>
            <Label for="project_name">Prosjektnavn</Label>
            <Input
              id="project_name"
              v-model="form.project_name"
              placeholder="Skriv inn prosjektnavn"
              class="mt-2"
            />
            <p v-if="form.errors.project_name" class="mt-1 text-sm text-red-600">
              {{ form.errors.project_name }}
            </p>
          </div>    
          <!-- Prosjektnummer -->
          <div>
            <Label for="project_number">Prosjektnummer</Label>
            <Input
              id="project_number"
              v-model="form.project_number"
              placeholder="Skriv inn prosjektnummer"
              class="mt-2"
            />
            <p v-if="form.errors.project_number" class="mt-1 text-sm text-red-600">
              {{ form.errors.project_number }}
            </p>
          </div>    
          <!-- Tilknyttede brukere -->
          <div>
            <Label>Tilknyttede brukere</Label>
            <div class="mt-2 space-y-1">
              <div
                v-for="profile in profiles"
                :key="profile.id"
                class="flex items-center space-x-2"
              >
                <Checkbox
                  :model-value="form.user_ids.includes(profile.id)"
                  @update:modelValue="checked => toggleUser(profile.id, checked)"
                />
                <span>{{ profile.name }}</span>
              </div>
            </div>
            <p v-if="form.errors.user_ids" class="mt-1 text-sm text-red-600">
              {{ form.errors.user_ids }}
            </p>
          </div>    
          <!-- Tilknyttede avdelinger -->
          <div>
            <Label>Tilknyttede avdelinger</Label>
            <div class="mt-2 space-y-1">
              <div
                v-for="dept in departments"
                :key="dept.id"
                class="flex items-center space-x-2"
              >
                <Checkbox
                  :model-value="form.department_ids.includes(dept.id)"
                  @update:modelValue="checked => toggleDept(dept.id, checked)"
                />
                <span>{{ dept.name }}</span>
              </div>
            </div>
            <p v-if="form.errors.department_ids" class="mt-1 text-sm text-red-600">
              {{ form.errors.department_ids }}
            </p>
          </div>    
          <!-- Actions -->
          <div class="flex items-center justify-end space-x-4">
            <Link :href="route('smartdok.projects.index')">
              <Button variant="outline">Avbryt</Button>
            </Link>
            <Button type="submit" :disabled="form.processing">Opprett</Button>
          </div>
        </form>
      </div>
    </AppLayout>
</template>
