'use client';

import Loader from '@/components/common/Loader';
import { real_box_requests } from '@/data/real-box/real-box.requests';
import useRequest from '@/hooks/useRequest';
import { useParams } from 'next/navigation';
import { useEffect } from 'react';
import DashboardCreateRealBoxPage from './DashboardCreateRealBox';

type Props = {};

const DashboardEditRealBoxPage = (props: Props) => {
    const params = useParams();
    const box_id = params.box_id as string;

    const getOneBox = useRequest(
        () => {
            return real_box_requests.find({ boxId: box_id });
        },
        {
            selectData(data) {
                const boxData = data.data;
                if (!boxData) return null;
                return {
                    id: box_id,
                    boxId: box_id!,
                    partyId: boxData.data.party.id,
                    partyName: boxData.data.party.name!,
                    paketIds: boxData.data.packetItemDtos!,
                    items: boxData.data.packetItemDtos.items,
                    // id?: number;
                    // boxId?: string;
                    // partyId?: number;
                    // partyName?: string;
                    // paketIds?: Array<{ id: number; packetName: string }>;
                };
            },
        }
    );

    useEffect(() => {
        getOneBox.refetch();
    }, [box_id]);

    if (getOneBox.loading || !getOneBox.data) {
        return <Loader p={8} size={96} />;
    }

    return (
        <>
            <DashboardCreateRealBoxPage initialValues={getOneBox.data as any} />
        </>
    );
};

export default DashboardEditRealBoxPage;