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

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

export default function SearchDemandNote({ searchCriteria, applyGridOnReady,applySearch }) {
   
    const intl = useIntl();
    const theme = useTheme();
    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
    const { locale } = intl;


    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);

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

    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: isMdOrLg ? 'auto' : 200,
            flex: isMdOrLg ? 1 : undefined,
        },
        {
            field: 'appNo',
            headerName: intl.formatMessage({id: 'applicationId'}),
            width: isMdOrLg ? 'auto' : 150,
            flex: isMdOrLg ? 1 : undefined,
        },
        {
            id: 'issueDate',
            field: 'issueDate',
            headerName: intl.formatMessage({id: 'sendDate'}),
            width: isMdOrLg ? 'auto' : 175,
            flex: isMdOrLg ? 1 : undefined,
            valueGetter: (params) => {
                return DateUtils.dateValue(params?.value);
            }
        },
        {
            field: 'status',
            headerName: intl.formatMessage({id: 'status'}),
            width: isMdOrLg ? 'auto' : 175,
            flex: isMdOrLg ? 1 : undefined,
            renderCell: (params) => {
                return StatusUtils.getStatus_i18n(params, locale);
            },
        },
        {
            field: 'sentDate',
            headerName: intl.formatMessage({id: 'sendDateTime'}),
            width: isMdOrLg ? 'auto' : 200,
            flex: isMdOrLg ? 1 : undefined,
            valueGetter: (params) => {
                return params?.value ? DateUtils.datetimeStr(params?.value):"";
            }
        },
        {
            field: 'filename',
            headerName: intl.formatMessage({id: 'files'}),
            width: isMdOrLg ? 'auto' : 300,
            flex: isMdOrLg ? 1 : undefined,
            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
                    columns={columns}
                    customPageSize={10}
                    getRowHeight={() => 'auto'}
                    applyGridOnReady={applyGridOnReady}
                    applySearch={applySearch}
                    // doLoad={{
                    //     url: DEMAND_NOTE_LIST,
                    //     params: _searchCriteria,
                    // }}
                    doLoad={React.useMemo(() => ({
                        url: DEMAND_NOTE_LIST,
                        params: _searchCriteria,
                    }), [_searchCriteria])}
                />
            </Box>
        </div>
    );
}
