// material-ui
import {useMemo} from 'react';
import {
 useMediaQuery,
} from '@mui/material';
import {
    GridActionsCellItem,
} from "@mui/x-data-grid";
import * as Icon from 'utils/IconUtils';
import * as DateUtils from "utils/DateUtils";
import * as ProofStatus from "utils/statusUtils/ProofStatus";
import {FiDataGrid} from "components/FiDataGrid";
import * as FormatUtils from "utils/FormatUtils"
import * as HttpUtils from "utils/HttpUtils"
import {GET_PUBLIC_NOTICE_APPLY_DETAIL_PROOF,GEN_GAZETTE_PROOF } from "utils/ApiPathConst"
import {useTheme} from "@emotion/react";
import { clickableLink } from 'utils/CommonFunction';
// ==============================|| EVENT TABLE ||============================== //

export default function ProofTab({appId, setCount}) {

    const theme = useTheme();
    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));

    const onDownloadClick = (params) => () => {
        HttpUtils.fileDownload({
            url: GEN_GAZETTE_PROOF+"/"+params?.row?.id,
        });
    };

    const renderHeaderWithAria = (params) => (
        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
    );

    const columns = [
        {
           
            field: 'refNo',
            headerName: 'Proof No.',
            width: isMdOrLg ? 'auto' : 200,
            flex: isMdOrLg ? 1 : undefined,
            cellClassName: 'actions',
            renderHeader: renderHeaderWithAria,
            renderCell: (params) => {
                return clickableLink('/proof/reply/' + params.row.id, params.row.refNo);
            },
        },
        {
            field: 'status',
            headerName: 'Status',
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderHeader: renderHeaderWithAria,
            renderCell: (params) => {
                return ProofStatus.getStatus_Eng(params);
            },
        },
        {
            field: 'created',
            headerName: 'Proof Issue Date',
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderHeader: renderHeaderWithAria,
            valueGetter: (params) => {
                return DateUtils.datetimeStr(params?.value);
            }
        },
        {
            field: 'replyDate',
            headerName: 'Confirmed/Return Date',
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderHeader: renderHeaderWithAria,
            valueGetter: (params) => {
                return params?.value?DateUtils.datetimeStr(params?.value):"";
            }
        },
        {
            field: 'fee',
            headerName: 'Fee',
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderHeader: renderHeaderWithAria,
            valueGetter: (params) => {
                return (params?.value)?"$ "+FormatUtils.currencyFormat(params?.value):"";
            }
        },
        {
            field: 'actions',
            type: 'actions',
            headerName: 'Proof Slip',
            width: 100,
            renderHeader: renderHeaderWithAria,
            cellClassName: 'actions',
            getActions: (params) => {
                if(params.row.action == null) return[];
                if(params.row.action != true) return[];
                return [
                    <GridActionsCellItem
                        key="OutSave"
                        icon={<Icon.Download />}
                        label="Download"
                        className="textPrimary"
                        onClick={onDownloadClick(params)}
                        color="primary"
                    />]
            },
        },
    ];

    return (
        <div style={{height:'20%', width: '98%'}}>
            <FiDataGrid
                columns={columns}
                customPageSize={10}
                doLoad={useMemo(() => ({
                    url: GET_PUBLIC_NOTICE_APPLY_DETAIL_PROOF+"/"+appId,
                    params: {},
                    callback: function (responseData) {
                        setCount(responseData?.count);
                    }
                }), [appId])}
            />
        </div>
    );
}