
import * as React from 'react';
import { FiDataGrid } from "components/FiDataGrid";
import { dateStr } from "utils/DateUtils";

import {GET_ISSUE} from "utils/ApiPathConst";

// ==============================|| EVENT TABLE ||============================== //

export default function GazetteIssueTable({ searchCriteria, applyGridOnReady }) {
    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);

    React.useEffect(() => {
        set_searchCriteria(searchCriteria);
    }, [searchCriteria]);


    const columns = [
        {
            id: 'issueYear',
            field: 'issueYear',
            headerName: 'Year',
            flex: 1,
            minWidth: 100,
            renderCell: (params) => {
                return <div style={{ margin: 4 }}>{params.row.issueYear}</div>
            },
        },
        {
            id: 'volume',
            field: 'volume',
            headerName: 'Volume',
            flex: 1,
            minWidth: 100,
            renderCell: (params) => {
                return <div style={{ margin: 4 }}>{params.row.volume}</div>
            },
        },
        {
            id: 'issueNo',
            field: 'issueNo',
            headerName: 'Issue No',
            flex: 1,
            minWidth: 100,
            renderCell: (params) => {
                return <div style={{ margin: 4 }}>{params.row.issueNo}</div>
            },
        },
        {
            id: 'issueDate',
            field: 'issueDate',
            headerName: 'Issue Date',
            flex: 2,
            minWidth: 150,
            renderCell: (params) => {
                let issueDate = params.row.issueDate;
                return <div style={{ margin: 4 }}>{dateStr(issueDate)}</div>
            },
        },
        {
            id: 'closingDate',
            field: 'closingDate',
            headerName: 'Closing Date',
            flex: 2,
            minWidth: 150,
            renderCell: (params) => {
                let closingDate = params.row.closingDate;
                return <div style={{ margin: 4 }}>{dateStr(closingDate)}</div>
            },
        },
        {
            id: 'closingDateOff',
            field: 'closingDateOff',
            headerName: 'Closing Date Off',
            flex: 2,
            minWidth: 150,
            renderCell: (params) => {
                // console.log(params)
                let closingDateOff = params.row.closingDateOff;
                return <div style={{ margin: 4 }}>{dateStr(closingDateOff)}</div>
            },
        },
        {
            id: 'issueDesc',
            field: 'issueDesc',
            headerName: 'Description',
            flex: 2,
            minWidth: 200,
        },
    ];

    // function handleRowDoubleClick(params) {
    //     navigate('/emailTemplate/' + params.id);
    // }

    return (
        <div style={{ height: "fit-content", width: '100%' }}>
            <FiDataGrid
                columns={columns}
                customPageSize={10}
                // onRowDoubleClick={handleRowDoubleClick}
                getRowHeight={() => 'auto'}
                applyGridOnReady={applyGridOnReady}
                // doLoad={{
                //     url: GET_ISSUE,
                //     params: _searchCriteria,
                // }}
                doLoad={React.useMemo(() => ({
                    url: GET_ISSUE,
                    params: _searchCriteria,
                }), [_searchCriteria])}
            />
        </div>
    );
}