// * Packages
import { useForm, usePage } from "@inertiajs/react";
import {
    LinkIcon,
    BookTextIcon,
    CogIcon,
    EyeIcon,
    ShieldAlertIcon,
} from "lucide-react";
import { route } from "ziggy-js";
// * Components shadcn
import { Button } from "@/components/ui/button";
import {
    Dialog,
    DialogHeader,
    DialogTitle,
    DialogDescription,
    DialogClose,
    DialogContent,
    DialogFooter,
    DialogTrigger,
} from "@/components/ui/dialog";
// * Other
import SimpleString from "@/back/Components/Inputs/SimpleString";
import SimpleSwitch from "@/back/Components/Inputs/SimpleSwitch";
import SimpleWysiwyg from "@/back/Components/Inputs/Wysiwyg/SimpleWysiwyg";
import EnumSelect from "@/back/Components/Inputs/EnumSelect";
import DynamicInputs from "@/back/Components/DynamicPages/DynamicInputs";
import FieldsetWrapper from "@/back/Components/FieldsetWrapper";
import ConfigDetails from "@/back/Components/PageConfigs/ConfigDetails";
import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
import GoToFrontView from "@/back/Components/GoToFrontView";
import useTrans from "@/hooks/use-translations";
import InputError from "@/back/Components/InputError";
import str from "@/hooks/use-string";
import { AppEnv, AuthProp, LaravelEnum } from "@/back/types/global";
import {
    ConfigField,
    DynamicPageModel,
    PageConfigModel,
} from "@/back/types/dynamic-pages";
import SubmitButton from "@/back/Components/SubmitButton";
import useCrudSubmit from "@/hooks/use-crud-submit";
import Slugifycator from "@/back/Components/Inputs/Slugifycator";
import { ModelSelect } from "@/back/Components/Inputs/ModelSelect";

export default function Form({
    model,
    modelName,
    modelRoute,
    action,
    method,
}: {
    model?: DynamicPageModel;
    modelName: string;
    modelRoute: string;
    action: string;
    method: number;
}) {

    /** Global */
    const { locale, url } = usePage().props.appEnv as AppEnv;
    const dynamicPageUrl = usePage().props.dynamicPageUrl as string;
    const userModel = (usePage().props.auth as AuthProp).user;
    const enumUserRole = usePage().props.enumUserRole as LaravelEnum;
    const enumDynamicPageStatus = usePage().props
        .enumDynamicPageStatus as LaravelEnum;

    const isConceptor = userModel.role === enumUserRole.conceptor.value;

    const pageConfigModels = usePage().props
        .pageConfigModels as Array<PageConfigModel>;
    // Models filtered based on the presence of the locale.
    const filteredPageConfigModels = pageConfigModels.filter(
        (pageConfigModel) =>
            pageConfigModel.label?.[locale] !== undefined &&
            pageConfigModel.config?.[locale] !== undefined,
    );

    // Set empty config by default.
    const defaultConfigId = 0;
    const configOptions = [
        {
            id: defaultConfigId,
            label: {},
            config: {},
            policies: {
                view: true,
                update: true,
                duplicate: true,
                delete: true,
            },
            view: null,
            created_at: new Date(),
            updated_at: new Date(),
            deleted_at: new Date(),
        } as PageConfigModel,
        ...filteredPageConfigModels,
    ];
    configOptions[defaultConfigId].label[locale] = useTrans(
        "back.config_none_selected",
    );

    // Set translations.
    const contentAssociateToModel = str(
        useTrans("back.form_associate_to", {
            params: { attribute: useTrans("validation.attributes.content") },
            choice: 1,
        }),
    )
        .ucFirst()
        .value();
    const modalTitle = useTrans("back.config_modal_title");
    const modalDescription = useTrans("back.config_modal_descripion");
    const modalClose = useTrans("back.close");
    const anchorAccessConfig = useTrans("back.access_model", {
        params: {
            model: useTrans("models.classes.page-config", { choice: 1 }),
        },
    });
    const transValidationRootLabel = useTrans("validation.custom.root");
    const transValidationParentPageLabel = useTrans("back.form_associate_to", {
        params: {
            attribute: useTrans("validation.custom.parent_page"),
        },
        choice: 2,
    });
    const transAssociateToStatus = useTrans("back.form_associate_to", {
        params: {
            attribute: useTrans("validation.custom.status"),
        },
        choice: 1,
    });
    const transFormTitleIsLocked = useTrans("back.form_title_isLocked");
    const transFormSubtitleIsLocked = useTrans("back.form_subtitle_isLocked");

    const getConfig = (id: number) =>
        configOptions.find((objet) => objet.id === id)?.config[
        locale
        ] as ConfigField[];

    /** Form section */
    const { post, setData, data, reset } = useForm({
        title: model?.title ? model?.title[locale] : "",
        slug: model?.slug ? model?.slug[locale] : "",
        content: model?.content ? model?.content[locale] : "",
        page_id: model?.page_id ?? null,
        config_id: model?.config_id ?? configOptions[defaultConfigId].id,
        status: model?.status ?? enumDynamicPageStatus.draft.value,
        isLocked: model?.isLocked ?? false,
        isRoot: model?.isRoot ?? false,
    });
    const defaultIsRootValue =
        !data.isRoot && data.page_id ? [data.page_id] : [];
    const submit = useCrudSubmit({
        method,
        modelRoute,
        modelName,
        action,
        model,
        post,
        data,
    });

    return (
        <form onSubmit={submit}>
            <InputError all />
            <FieldsetWrapper
                title={useTrans("back.form_title_global")}
                icon={<BookTextIcon className="mr-1" />}
                description={useTrans("back.form_subtitle_global")}
                className="sm:grid-cols-2 gap-4"
            >
                <SimpleString
                    name="title"
                    label={str(
                        useTrans("back.form_associate_to", {
                            params: {
                                attribute: useTrans(
                                    "validation.attributes.title",
                                ),
                            },
                            choice: 1,
                        }),
                    )
                        .ucFirst()
                        .value()}
                    value={data.title}
                    setData={setData}
                />
                {(!data?.isLocked || isConceptor) && (
                    <EnumSelect
                        name="status"
                        options={enumDynamicPageStatus}
                        label={str(transAssociateToStatus).ucFirst().value()}
                        placeholder={`ex: ${enumDynamicPageStatus.draft.label}`}
                        selected={data.status}
                        setData={setData}
                    />
                )}
            </FieldsetWrapper>
            <FieldsetWrapper
                title={useTrans("back.form_title_page_accessibility")}
                icon={<LinkIcon className="mr-1" />}
                description={useTrans("back.form_subtitle_page_accessibility")}
                className="sm:grid-cols-2 gap-4"
            >
                {isConceptor && (
                    <div className="col-span-2">
                        <SimpleSwitch
                            label={str(transValidationRootLabel)
                                .ucFirst()
                                .value()}
                            name="isRoot"
                            checked={data.isRoot}
                            setData={(name, value) => {
                                setData("page_id", null);
                                setData("slug", "");
                                // @ts-expect-error TS2345: 'name' type is dynamic, TypeScript cannot infer the correct key
                                setData(name, value);
                            }}
                        />
                    </div>
                )}
                {!data?.isRoot && (
                    <>
                        <ModelSelect
                            name="page_id"
                            targetModel="dynamic_pages"
                            multiple={false}
                            field="title"
                            closeOnSelect
                            label={str(transValidationParentPageLabel)
                                .ucFirst()
                                .value()}
                            placeholder="ex: "
                            defaultValues={defaultIsRootValue}
                            exclude={model?.id}
                            required={false}
                            setData={setData}
                            disabled={data.isRoot}
                        />
                        <Slugifycator
                            value={!data.isRoot ? data.slug : ""}
                            targetValue={data.title}
                            setData={setData}
                            disabled={data.isRoot}
                        />
                    </>
                )}
                <div className="col-span-1 md:col-span-2">
                    <GoToFrontView
                        modelName={useTrans(`models.classes.${modelName}`, {
                            choice: 1,
                        })}
                        pathField={data.isRoot ? "" : (dynamicPageUrl ?? "").replace(url, "").replace(/^\/+/, "")}
                        isAvailable={
                            model?.status ===
                            enumDynamicPageStatus.published.value
                        }
                    />
                </div>
            </FieldsetWrapper>
            <FieldsetWrapper
                title={useTrans("back.form_title_page")}
                icon={<CogIcon className="mr-1" />}
                description={useTrans("back.form_subtitle_page")}
                className="gap-4"
            >
                <div className="grid sm:grid-cols-2 gap-4 border-b border-input pb-4">
                    <div className="flex justify-start items-end gap-1.5">
                        <ModelSelect
                            name="config_id"
                            targetModel="page_configs"
                            multiple={false}
                            closeOnSelect
                            field="label"
                            responsive
                            label={str(
                                useTrans("back.form_associate_to", {
                                    params: {
                                        attribute: useTrans(
                                            "validation.custom.config",
                                        ),
                                    },
                                    choice: 2,
                                }),
                            )
                                .ucFirst()
                                .value()}
                            required={false}
                            placeholder="ex: John Doe"
                            defaultValues={
                                data.config_id ? [data.config_id] : []
                            }
                            setData={setData}
                        />
                        {isConceptor &&
                            Number(data.config_id) !== defaultConfigId && (
                                <Dialog>
                                    <DialogTrigger asChild>
                                        <Button
                                            variant="secondary"
                                            type="button"
                                            size="icon"
                                        >
                                            <EyeIcon />
                                        </Button>
                                    </DialogTrigger>
                                    <DialogContent className="max-w-4xl w-full max-h-[100vh]">
                                        <DialogHeader>
                                            <DialogTitle>
                                                {modalTitle}
                                            </DialogTitle>
                                            <DialogDescription>
                                                {modalDescription}
                                            </DialogDescription>
                                        </DialogHeader>
                                        <div className="max-h-[25rem] overflow-y-auto">
                                            <ConfigDetails
                                                config={getConfig(
                                                    Number(data.config_id),
                                                )}
                                            />
                                        </div>
                                        <DialogFooter>
                                            <BtnOptionnalLinkWithTooltip
                                                link={route(
                                                    "back.page-configs.show",
                                                    data.config_id,
                                                )}
                                                content={<CogIcon />}
                                                tooltipContent={
                                                    anchorAccessConfig
                                                }
                                                variant="secondary"
                                            />
                                            <DialogClose asChild>
                                                <Button variant="secondary">
                                                    {modalClose}
                                                </Button>
                                            </DialogClose>
                                        </DialogFooter>
                                    </DialogContent>
                                </Dialog>
                            )}
                    </div>
                </div>
                {Number(data.config_id) === defaultConfigId ? (
                    <SimpleWysiwyg
                        name="content"
                        model="DynamicPage"
                        label={contentAssociateToModel}
                        value={String(
                            typeof data.content === "string"
                                ? data.content
                                : "",
                        )}
                        setData={setData}
                    />
                ) : (
                    <DynamicInputs
                        name="content"
                        config={getConfig(Number(data.config_id))}
                        content={
                            typeof data.content === "object"
                                ? data.content
                                : null
                        }
                        setData={setData}
                        // @ts-expect-error Types diff between custom reset and useForm reset.
                        reset={reset}
                    />
                )}
            </FieldsetWrapper>
            {isConceptor && (
                <FieldsetWrapper
                    className="gap-4"
                    title={transFormTitleIsLocked}
                    icon={<ShieldAlertIcon className="mr-1" />}
                    description={transFormSubtitleIsLocked}
                    inline
                >
                    <SimpleSwitch
                        name="isLocked"
                        checked={data.isLocked}
                        setData={setData}
                    />
                </FieldsetWrapper>
            )}
            <div className="text-center">
                <SubmitButton
                    modelTrans={useTrans(`models.classes.${modelName}`, {
                        choice: 1,
                    })}
                />
            </div>
        </form>
    );
}