'use client';
import React, { useState, useEffect } from "react";
import { apiPostFetcher } from "@/lib/fetcher";
import { ApiPaginationRequestWithQuery } from "@/validations/mutual/api/requests/validations";
import { TableComponentProps } from "@/validations/mutual/table/type";
import ComponentTable from "../mutual/TableCardPlain";
import PaginationComponent from "../mutual/UpperPagination";
import LowerPagination from "../mutual/LowerPagination";

const TableCardComponent: React.FC<TableComponentProps> = ({
    urls,
    schemas,
    translations,
    columns,
    initPagination,
}) => {
    const defaultPagination = {
        page: initPagination?.page || 1,
        size: initPagination?.size || 10,
        orderFields: initPagination?.orderFields || [],
        orderTypes: initPagination?.orderTypes || [],
        query: initPagination?.query || {},
    }
    const [data, setData] = useState<any>(null);
    const [pagination, setPagination] = useState<ApiPaginationRequestWithQuery>(defaultPagination);
    const [apiPagination, setApiPagination] = useState<any>({
        onPage: 1,
        onPageCount: 10,
        totalPage: 1,
        totalCount: 1,
        next: false,
        back: false,
    });
    const handleBack = async () => {
        setPagination({ ...pagination, page: pagination.page > 1 ? pagination.page - 1 : pagination.page });
        await fetchData();
    }
    const handleNext = async () => {
        setPagination({ ...pagination, page: pagination.page < apiPagination.totalPage ? pagination.page + 1 : pagination.page });
        await fetchData();
    }
    const fetchData = async () => {
        const response = await apiPostFetcher({
            url: urls.list,
            isNoCache: true,
            body: {
                page: pagination.page,
                size: pagination.size,
                orderFields: pagination.orderFields,
                orderTypes: pagination.orderTypes,
                query: pagination.query,
            },
        });
        if (response && response.data) {
            setData(response.data.data);
            if (response.data.pagination) {
                setApiPagination(response.data.pagination);
            }
        }
    };
    useEffect(() => { fetchData() }, [pagination.page, pagination.size, pagination.orderFields, pagination.orderTypes]);
    const upperPaginationProps = {
        apiPagination,
        pagination,
        setPagination,
        defaultPagination,
    }
    const lowerPaginationProps = {
        pagination: apiPagination,
        handleBack,
        handleNext,
    }
    const tableProps = {
        data,
        columns,
        translations,
    }

    return (
        <div>
            <div className="flex flex-col items-center justify-start my-6"><PaginationComponent {...upperPaginationProps} /></div>
            <div className="flex flex-col items-center justify-start my-6"><LowerPagination {...lowerPaginationProps} /></div>
            <div className="flex flex-col items-center justify-start my-6"><h1>Post Data Page</h1><ComponentTable {...tableProps} /></div>
        </div>
    );
}

export default TableCardComponent;