// material-ui
import * as React from 'react';
// import { GridActionsCellItem, } from "@mui/x-data-grid";
import { FiDataGrid } from "components/FiDataGrid";
// import EditIcon from '@mui/icons-material/Edit';
import { useEffect } from "react";
import { dateStr } from "utils/DateUtils";
// import { useNavigate } from "react-router-dom";

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

export default function HolidayTable({ recordList }) {
    const [rows, setRows] = React.useState(recordList);

    // const navigate = useNavigate()

    useEffect(() => {
        console.log(recordList)
        setRows(recordList.records);
    }, [recordList]);

    const columns = [
        {
            id: 'HOLIDAY_DAY',
            field: 'HOLIDAY_DAY',
            headerName: 'Date',
            flex: 4,
            renderCell: (params) => {
                let HOLIDAY_DAY = params.row.HOLIDAY_DAY;
                return <div style={{ margin: 4 }}>{dateStr(HOLIDAY_DAY)}</div>
            },
        },
        {
            id: 'DESCRIPTION',
            field: 'DESCRIPTION',
            headerName: 'Description',
            flex: 5,
        },
    ];

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

    return (
        <div style={{ height: "fit-content", width: '100%' }}>
            <FiDataGrid
                rows={rows}
                columns={columns}
                customPageSize={20}
                // onRowDoubleClick={handleRowDoubleClick}
                getRowHeight={() => 'auto'}
            />
        </div>
    );
}