import { Row, Col } from "react-bootstrap";
import Breadcrumb from "@/components/ui/pages/Breadcrumb";
import Datatable from "../ui/datatable/Datatable";
import { useCollapsed } from "@/components/Context/CollapsedContext";
import { useState, useEffect } from "react";
import { bulkFileListing } from '@/services/bulkUploadRequest';

interface Prop {
  breadcrumbs: {
    title: string;
    path: string;
  }[];
}

export default function BulkImport(props: Prop)
{
    const { isCollapsed }: any = useCollapsed();
    const [requestData, setRequestData] = useState<any[]>([]);
    const [loading, setLoading] = useState(false);
    const [requestMetaData, setRequestMetaData] = useState<any>();
    const [queryDataObj, setQueryDataObj] = useState<any>({});
    const [refreshBulkFileListing, setRefreshBulkFileListing] = useState(false);

    useEffect(() => {
        fetchData();
    }, [queryDataObj, refreshBulkFileListing]);

    const fetchData = async () => {
      setLoading(true);
      try {
          const response = await bulkFileListing(queryDataObj);
          if(response?.status === 'success'){
            setRequestData(response?.data);
            setRequestMetaData(response?.meta)
          }
      } catch (error) {
          console.error("Error fetching data:", error);
      } finally {
          setLoading(false);
      }
    };

    return (
        <div className={` ${isCollapsed ? 'collapsed-body' : 'content-body'}`}>
        <Row className="page-titles mx-0">
          <Col className="p-md-0">
            <Breadcrumb breadcrumbs={props?.breadcrumbs} />
          </Col>
        </Row>
        <Row>
          <Col>
            <div className="container container-div">
              <div className="row">
                <div className="col-sm-6 table-headers">
                  <h3 className="text-primary h3_text mt-2">
                    Bulk Import
                  </h3>
                </div>
              </div>
            </div>
            <div className="bulkImportTableListing">
              <div className='form-group secDiv'>
                <div className="datatable-filter-demo">
                  <Datatable 
                    loading={loading} 
                    data={requestData} 
                    requestMetaData={requestMetaData} 
                    setQueryDataObj={setQueryDataObj}
                    setRefreshBulkFileListing={setRefreshBulkFileListing}
                  />
                </div>
              </div>              
            </div>
          </Col>
        </Row>
      </div>
    );
}