"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 { TextareaControl } from "@/components/form/control/textarea.control";
import { MediaControl } from "@/components/form/control/media.control";
import { CheckboxControl } from "@/components/form/control/checkbox.control";
import { createSlug } from "@/lib/utils/create-slug";
import { MediaScope } from "@/server/modules/media/types/media-scope.enum";
import { Routes } from "@/config/routes";

export const useProfileFormSchema = () => {
    const t = useTranslations("dashboard.profile");

    return useMemo(() => z.object({
        userId: z.string().uuid().nullable().optional(),
        avatarId: z.string().uuid().nullable().optional(),
        name: z.string().min(1, t("fields.name.error")),
        slug: z.string().optional(),
        jobInfo: z.string().nullable().optional(),
        isMain: z.boolean().optional()
    }), [t]);
};

export type ProfileFormValues = z.infer<ReturnType<typeof useProfileFormSchema>>;

export const useProfileForm = (props: UseFormProps<ProfileFormValues>): UseFormReturn<ProfileFormValues> => {
    const schema = useProfileFormSchema();

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

type ProfileFormProps = FormProps<ProfileFormValues, HTMLFormElement, HTMLAttributes<HTMLFormElement>> & {
};

export const ProfileForm: React.FC<ProfileFormProps> = (props) => {
    const {
        children,
        formControl,
        ...rest
    } = props;

    const t = useTranslations("dashboard.profile");
    const schema = useProfileFormSchema();

    const form = useProfileForm({
        formControl
    });

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

    return (
        <Form
          {...rest}
          formControl={form}
          resolver={zodResolver(schema)}>
            <div className="flex flex-row gap-4">
                <div className="flex-1 space-y-4">
                    <InputControl
                      label={t("fields.name.label")}
                      placeholder={t("fields.name.placeholder")}
                      name="name" />

                    <InputControl
                      label={t("fields.slug.label")}
                      name="slug"
                      placeholder={name ? createSlug(name) : t("fields.slug.placeholder")} />

                    <TextareaControl
                      label={t("fields.jobInfo.label")}
                      placeholder={t("fields.jobInfo.placeholder")}
                      name="jobInfo" />

                    <CheckboxControl
                      label={t("fields.hasPage.label")}
                      helperText={t("fields.hasPage.helperText", {
                        url: Routes.AUTHOR_((slug || name) ? createSlug(slug || name) : "[slug]")
                      })}
                      name="hasPage" />

                    <CheckboxControl
                      label={t("fields.isMain.label")}
                      helperText={t("fields.isMain.helperText")}
                      name="isMain" />
                </div>

                <div className="flex-0 space-y-4">
                    <MediaControl
                      autosubmit
                      scope={MediaScope.AVATAR}
                      label={t("fields.avatar.label")}
                      name="avatarId" />
                </div>
            </div>

            {children}
        </Form>
    );
};