// material-ui
import * as React from 'react';
import {
    Button,
    Box,
} from '@mui/material';
import * as DateUtils from "utils/DateUtils";
import * as StatusUtils from "utils/statusUtils/DnStatus";
import { FiDataGrid } from "components/FiDataGrid";

import * as HttpUtils from "utils/HttpUtils";
import {useIntl} from "react-intl";
// ==============================|| EVENT TABLE ||============================== //

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

    React.useEffect(() => {
        setRows(recordList);
    }, [recordList]);

    const onDownloadClick = (params) => () => {
        HttpUtils.fileDownload({
            fileId: params.row.fileId,
            skey: params.row.skey,
            filename: params.row.filename,
        });
    };

    const columns = [
        {
            field: 'dnNo',
            headerName: intl.formatMessage({id: 'paymentRecordId'}),
            width: 200,
        },
        {
            field: 'appNo',
            headerName: intl.formatMessage({id: 'applicationId'}),
            width: 150,
        },
        {
            id: 'issueDate',
            field: 'issueDate',
            headerName: intl.formatMessage({id: 'receiptDate'}),
            width: 175,
            valueGetter: (params) => {
                return DateUtils.dateStr(params?.value);
            }
        },
        {
            field: 'status',
            headerName: intl.formatMessage({id: 'status'}),
            width: 175,
            renderCell: (params) => {
                return [StatusUtils.getStatus_Cht(params)]
            },
        },
        {
            field: 'sentDate',
            headerName: intl.formatMessage({id: 'sendDate'}),
            flex: 1,
            valueGetter: (params) => {
                return params?.value ? DateUtils.datetimeStr(params?.value) + " - " + params.row.sentBy : "";
            }
        },
        {
            field: 'filename',
            headerName: intl.formatMessage({id: 'files'}),
            flex: 1,
            renderCell: (params) => {
                return <Button onClick={onDownloadClick(params)}><u>{params.row.filename}</u></Button>;
            },
        },
    ];

    return (
        <div style={{ height: '100%', width: '100%' }}>
            <Box sx={{ backgroundColor: "#fff", ml: 2 }} width="98%">
                <FiDataGrid
                    rows={rows}
                    columns={columns}
                    customPageSize={100}
                    getRowHeight={() => 'auto'}
                />
            </Box>
        </div>
    );
}
