<script setup lang="ts">
import Button from '@/components/ui/button/Button.vue';
import { toTypedSchema } from '@vee-validate/zod';
import { Form } from 'vee-validate';
import { onMounted, ref } from 'vue';
import * as z from 'zod';
import FormInput from './FormInput.vue';
import FormCheckboxs from './FormCheckbox.vue';

const formSchema = toTypedSchema(z.object({
    name: z.string(),
    other: z.boolean(),
}))

const initialValues = ref<Record<string, unknown> | null>(null);

async function onSubmit(val: any) {
    console.log(val);
    // emit('submit', val);
}

enum FormTypes {
    Checkbox = "FormCheckbox",
    Text = "FormInput"
}

const schema = [
    {
        name: "name",
        label: "What is your name?",
        description: "Something something name name",
        readOnly: false,
        type: FormTypes.Text
    },
    {
        name: "other",
        label: "This is a checkbox",
        description: "This is a description",
        readOnly: false,
        type: FormTypes.Checkbox
    }
]

</script>

<template>
    <Form :validation-schema="formSchema" :initial-values="initialValues" @submit="onSubmit" class="space-y-6">
        <component v-for="field in schema" :is="field.type" :description="field.description" :label="field.label"
            :read-only="field.readOnly" :name="field.name"></component>
        <!-- <FormInput v-for="field in schema" :description="field.description" :label="field.label"
            :read-only="field.readOnly" :name="field.name"></FormInput> -->
        <div class="pt-2">
            <Button type="submit" :onClick="() => console.log('hi')">Submit</Button>
        </div>
    </Form>
</template>