"use client";
import React, { useMemo, HTMLAttributes } from "react";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, UseFormProps, UseFormReturn } from "react-hook-form";
import { Form, FormProps } from "react-compose-form";
import { useTranslations } from "next-intl";
import { InputControl } from "@/components/form/control/input.control";
import { FormDescription } from "@/components/ui/form";
import { Badge } from "@/components/ui/badge";
import { createSlug } from "@/lib/utils/create-slug";

export const useTagFormSchema = () => {
    const t = useTranslations("dashboard.tag.editor.fields");

    return useMemo(() => z.object({
        name: z.string({
            required_error: t("name.error")
        }).min(1, t("name.error"))
    }), [t]);
};

export type TagFormValues = z.infer<ReturnType<typeof useTagFormSchema>>;

export const useTagForm = (props: UseFormProps<TagFormValues>): UseFormReturn<TagFormValues> => {
    const schema = useTagFormSchema();

    return useForm<TagFormValues>({
        ...props,
        resolver: zodResolver(schema)
    });
};

type TagFormProps = FormProps<TagFormValues, HTMLFormElement, HTMLAttributes<HTMLFormElement>>;

export const TagForm: React.FC<TagFormProps> = (props) => {
    const t = useTranslations("dashboard.tag.editor");

    const {
        children,
        formControl,
        ...rest
    } = props;

    const schema = useTagFormSchema();

    const form = useTagForm({
        formControl
    });

    const name = form.watch("name");

    const slug = useMemo(() => {
        if(!name) {
            return "";
        }

        return createSlug(name);
    }, [name]);

    return (
        <Form
          {...rest}
          formControl={form}
          resolver={zodResolver(schema)}>
            <InputControl
              label={t("fields.name.label")}
              placeholder={t("fields.name.placeholder")}
              name="name" />

            {slug && (
                <FormDescription>
                    {t("fields.slug.label")}: <Badge variant="outline" className="font-mono text-xs">{slug}</Badge>
                </FormDescription>
            )}

            {children}
        </Form>
    );
};