"use client";
import { useEffect } from "react";
import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { menu } from "@/lib/menu-list";
import { useAccess } from "@/lib/access";
import { useData, useFormRefs, Input, Button, ButtonContainer, CheckBox, Frame, Box } from "@/Theme/Midone/Forms";
import { useRouter } from 'next/navigation';

export function RoleForm({ id, permission }) {
    const { activeLang, Lang } = useLang();
    const { laraAdmin } = useConfig();
    const { componentPermission } = useAccess();
    const router = useRouter();
    let component = useFormRefs();
    let { save, get } = useData();
    let menus = menu;
    

    let url = laraAdmin + "/roles", method = "new";
    if (id != 0 && id != undefined) url = laraAdmin + "/roles/" + id, method = "edit";

    permission && componentPermission(permission + method);

    useEffect(() => {
        get(url, component, "info");
    }, []);

    const saveItem = () => save(url, component, method, "/roles");
    const back = () => router.back();

    return (
        <>
            <Frame>
                <Box>
                <Input className="col-span-6" label={Lang("public.title")}
                        refItem={[component, "title_fa"]} required="true"
                    />
                    <CheckBox label="status" name={Lang('public.active')} refItem={[component, "status_id"]} />
                </Box>
            </Frame>
            <ButtonContainer>
                <Button label="save" onClick={saveItem} />
                <Button label="back" onClick={back} />
            </ButtonContainer>
        </>
    );
}