// material-ui
import {
    Typography,
} 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"

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

export default function SearchPublicNoticeTable({ recordList }) {
    const [rows, setRows] = React.useState(recordList);
    const [total, setTotal] = React.useState(0);

    React.useEffect(() => {
        setRows(recordList);
        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:'Particulars',
            flex: 1,
            renderCell: (params) => {
                let appNo = params.row.appNo;
                // console.log(params.row)
                return <div style={{ margin: 4, textAlign:"left"}}>Gazette Supplement No. 6 <br/>
                    {isORGLoggedIn()&&params.row.careOf!=null&&params.row.careOf!=""?<>{params.row.careOf}<br /></>:null}
                    App No: {appNo}<br/>
                    Issue Date: {DateUtils.dateValue(params.row.issueDate)}<br/>
                    Length: {formatPaymentParticularsLength(params.row)}</div>
            },
        },
        {
            id: 'fee',
            field: 'fee',
            headerName: 'Amount ($)',
            width: 150,
            valueGetter: (params) => {
                return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
            }
        },
    ];

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

            <FiDataGrid
                rowHeight={150}
                rows={rows}
                columns={columns}
                customPageSize={5}
            />

            <Typography align="right" variant= "h3">Total Amount: <span style={{ color: "blue", fontWeight: "bold", }}> HK$ {FormatUtils.currencyFormat(total)}</span></Typography>
        </div>
    );
}
