"use client";
import { useEffect } from "react";
import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { useData, useFormRefs } from "@/Theme/Midone/Forms";
import { Loading } from "@/Theme/Midone";
import { Frame } from "@/Theme/Midone/Forms";
import { useRouter } from 'next/navigation';
import { DiscountPacakges,Info } from '@/Components/Discount/Details';
import { useAccess } from "@/lib/access";
import { useUtility } from "@/lib/utility";

export function View({ id }) {
    const { Lang, local } = useLang();
    const { laraAdmin,nextAdmin,mediaPath } = useConfig();
    const { get } = useData();
    const formUrl = "/discounts";
    let url = `${laraAdmin}${formUrl}/show-info/${id}`;
    const router = useRouter();
    let component = useFormRefs();

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

    const { checkPermission } = useAccess();
    const { getField,getRelation } = useUtility();
    
    const data = component?.state?.info?.item;
    const packages = data?.packages;

    let urlEdit = `${nextAdmin+formUrl}/${data?.id}/edit`;

    const back = () => router.back();
    
    return (
        <Frame title={Lang("discounts")}>
            {((data == undefined))?
                <Loading />
            :
                <>
                    <Info item={data} Lang={Lang} local={local} urlEdit={urlEdit}
                        back={back} checkPermission={checkPermission} getField={getField} getRelation={getRelation}
                    />
                    <DiscountPacakges packages={packages} countPacakge={data?.count_pacakge} Lang={Lang} local={local} />
                </>
            }
        </Frame>
    );
}