"use client";

import { useEffect } from "react";
import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { useAccess } from "@/lib/access";
import { useRouter } from "next/navigation";

import {
    useFormRefs,
    Frame,
    Input,
    Button,
    ButtonContainer,
    useData,
    Box,
} from "@/Theme/Midone/Forms";

import { Select } from "@/Theme/Midone/Forms/Select";

export default function TranslateForm() {

    const { Lang } = useLang();
    const { laraAdmin } = useConfig();
    const router = useRouter();

    const component = useFormRefs();
    const { save, get } = useData();

    const laraUrl = "/translates";

    const loadTranslate = (lang, file) => {
        if (!lang || !file) return;

        get(
            `${laraAdmin}${laraUrl}/${lang}/${file}`,
            component,
            "info"
        );
    };

    useEffect(() => {
        loadTranslate("fa", "menus");
    }, []);

    const saveItem = () => {

        const lang = component?.state?.info?.meta?.lang;
        const file = component?.state?.info?.meta?.file;

        if (!lang || !file) return;

        save(
            `${laraAdmin}${laraUrl}/${lang}/${file}`,
            component,
            "edit",
            "/translates"
        );
    };

    return (
        <Frame title={Lang(["translations"])}>
            <Box>

                {/* LANGUAGE */}
                <Select
                    className="col-span-6"
                    label="languages"
                    refItem={[component, "lang"]}
                    valueKey="id"
                    titleKey="title"
                    data={[
                        { id: "fa", title: "فارسی" },
                        { id: "en", title: "English" },
                        { id: "ar", title: "العربية" }
                    ]}
                    defaultValue={component?.state?.info?.meta?.lang || "fa"}
                    onChange={(e) => {
                        const lang = e.target.value;
                        const file = component?.state?.info?.meta?.file || "menus";

                        loadTranslate(lang, file);
                    }}
                />

                {/* FILE */}
                <Select
                    className="col-span-6"
                    label="file"
                    refItem={[component, "file"]}
                    valueKey="id"
                    titleKey="title"
                    defaultValue={component?.state?.info?.meta?.file || "menus"}
                    data={[
                        { id: "menus", title: Lang('menus') },
                        { id: "breadcrumbs", title: Lang('breadcrumbs') },
                        { id: "admin", title: Lang('admin') },
                        { id: "public", title: Lang('public') },
                        { id: "auth", title: Lang('auth') },
                        { id: "site", title: Lang('site') },
                    ]}
                    onChange={(e) => {
                        const file = e.target.value;
                        const lang = component?.state?.info?.meta?.lang || "fa";

                        loadTranslate(lang, file);
                    }}
                />

                {/* ITEMS */}
                {component?.state?.info?.items?.map((item, index) => (
                    <div key={index} className="contents">

                        <div className="col-span-3 flex items-center font-medium">
                            {item.key}
                        </div>

                        <Input
                            type="hidden"
                            refItem={[component, `items.${index}.key`]}
                            defaultValue={item.key}
                        />

                        <Input
                            label=" "
                            className="col-span-9"
                            refItem={[component, `items.${index}.value`]}
                            defaultValue={item.value}
                        />

                    </div>
                ))}

            </Box>

            <ButtonContainer className="col-span-12">

                <Button label="save" onClick={saveItem} />

                <Button label="back" onClick={() => router.back()} />

            </ButtonContainer>
        </Frame>
    );
}