---
import Form from "../components/Form.astro";
import Field from "../components/Field.astro";
import ComponentLayout from "../layouts/ComponentLayout.astro";
---

<ComponentLayout class="wr:p-4">
    <Form
        title="Create Project"
        description="Fields marked * are required."
        columns={2}
        schemaName="schema"
        onSubmit="submit"
        submitLabel="Create Project"
        submitIcon="mdi:check"
        resetOnSubmit
    >
        <Field
            name="name"
            label="Project name"
            value="Test"
            required
            placeholder="Acme CRM"
            prefixText="Prefix"
            description="Description"
        />
        <Field
            name="email"
            label="Contact email"
            placeholder="Enter an personal email"
            kind="email"
            required
            iconLeft="lets-icons:check-ring-duotone"
        />
        <Field
            name="teamSize"
            label="Team size"
            placeholder="how many members are in the team"
            kind="number"
            required
            iconRight="lets-icons:check-ring-duotone"
        />
        <Field name="startDate" label="Start date" kind="date" required />
        <Field
            name="desc"
            label="Description"
            kind="textarea"
            placeholder="Enter the description"
            value="YESY"
            rows={5}
            class="wr:sm:col-span-2"
        />
        <Field
            name="channel"
            label="Default channel"
            kind="radio"
            value="email"
            class="wr:sm:col-span-2"
            options={[
                { value: "email", label: "Email" },
                { value: "sms", label: "SMS" },
                { value: "whatsapp", label: "WhatsApp" },
            ]}
        />
        <Field
            name="agree"
            label="I agree to the Terms"
            kind="checkbox"
            class="wr:sm:col-span-2"
        />
    </Form>
</ComponentLayout>

<script>
    import { z } from "zod";

    window.schema = z.object({
        name: z.string().min(3, "Please enter at least 3 characters."),
        email: z.string().email("Enter a valid email address."),
        teamSize: z.coerce
            .number()
            .int()
            .min(1, "Team size must be at least 1."),
        startDate: z.string().min(1, "Start date is required."),
        desc: z
            .string()
            .max(500, "Description must be under 500 characters.")
            .optional()
            .or(z.literal("")),
        channel: z.enum(["email", "sms", "whatsapp"], {
            required_error: "Select a channel.",
        }),
        agree: z.literal(true, {
            errorMap: () => ({ message: "You must accept the terms." }),
        }),
    });

    window.submit = async (data: any, form: any) => {
        console.log("Validated data:", data);
    };
</script>