// material-ui
import {
    Typography, useMediaQuery,
} from '@mui/material';
import {
    isORGLoggedIn,
    formatPaymentParticularsLength,
  } from "utils/Utils";
import * as React from 'react';
import * as FormatUtils from "utils/FormatUtils"
import { FiDataGrid } from "components/FiDataGrid";
import * as DateUtils from "utils/DateUtils"
import {useTheme} from "@emotion/react";
import {FormattedMessage, useIntl} from "react-intl";
import { Grid } from '../../../../node_modules/@mui/material/index';
// import * as Utils from "utils/Utils"
// ==============================|| EVENT TABLE ||============================== //

export default function SearchPublicNoticeTable({ recordList }) {
    const [rows, setRows] = React.useState(recordList);
    const [total, setTotal] = React.useState(0);
    const theme = useTheme();
    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
    const intl = useIntl();
    const { locale } = intl;
    //const intl = useIntl();

    const _sx = {
        padding: "4 2 4 2",
        boxShadow: 1,
        border: 1,
        borderColor: '#DDD',
        '& .MuiDataGrid-cell': {
            borderTop: 1,
            borderBottom: 1,
            borderColor: "#EEE"
        },
        '& .MuiDataGrid-footerContainer': {
            border: 1,
            borderColor: "#EEE"
        }
    }

    React.useEffect(() => {
        const indexedData = recordList.map((obj, index) => ({ index_number: index + 1, ...obj }));
        setRows(indexedData);
        let countTotal = 0;
        recordList.forEach(item => {
            countTotal+=item.fee;
        });

        setTotal(countTotal)
    }, [recordList]);

    const columns = [
        {
            field: "paymentIndex",
            headerName: "No.",
            filterable: false,
            renderCell: (params) => {
                return (params.row.index_number);

            }
        },
        {
            id: 'appNo',
            field: 'appNo',
            headerName: intl.formatMessage({id: 'particulars'}),
            width: isMdOrLg ? 'auto' : 300,
            flex: isMdOrLg ? 1 : undefined,
            renderCell: (params) => {
                let appNo = params.row.appNo;
                // console.log(params)
                return <div style={{ margin: 4, textAlign:"left"}}>
                    <FormattedMessage id="gazetteSampleName"/><br/>
                    {isORGLoggedIn()&&params.row.careOf!=null&&params.row.careOf!=""?<>{params.row.careOf}<br /></>:null}
                    <FormattedMessage id="applicationId"/>: {appNo}<br/>
                    <FormattedMessage id="gazetteDate"/>: {locale === 'en' ? DateUtils.dateValue(params.row.issueDate) : DateUtils.dateStr_Cht(params.row.issueDate)}<br/>
                    <FormattedMessage id="gazetteLength"/>: {formatPaymentParticularsLength(params.row, intl)}</div>
            },
        },
        {
            id: 'fee',
            field: 'fee',
            headerName: intl.formatMessage({id: 'currencyAmount'}),
            width: 200,
            valueGetter: (params) => {
                return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
            }
        },
    ];

    return (
        <div style={{ minHeight:400, width: '100%' }}>

            <FiDataGrid
                sx={_sx}
                rowHeight={150}
                rows={rows}
                columns={columns}
                customPageSize={5}
            />
            <Grid container direction="row"  justifyContent="flex-end" sx={{backgroundColor: '#fff' }}>
                <Grid item>
                    <Typography align="right" variant="h4" sx={{mr:2,mt:1}}>
                        <FormattedMessage id="payTotal"/>&nbsp;:&nbsp;
                        <span style={{ color: "blue", fontWeight: "bold", }}>
                            $&nbsp;{FormatUtils.currencyFormat(total)}
                        </span>
                    </Typography>
                </Grid>
            </Grid>
        </div>
    );
}
