// material-ui
import * as React from 'react';
import * as UrlUtils from "utils/ApiPathConst";
import * as DateUtils from "utils/DateUtils";
import * as FormatUtils from "utils/FormatUtils";
// import * as PublicNoteStatusUtils from "utils/statusUtils/PublicNoteStatusUtils"
import { FiDataGrid } from "components/FiDataGrid";
import { clickableLink } from 'utils/CommonFunction';
// ==============================|| EVENT TABLE ||============================== //

export default function SearchPublicNoticeTable({ searchCriteria,}) {
    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"
        }
    }
    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
    React.useEffect(() => {
        set_searchCriteria(searchCriteria);
    }, [searchCriteria]);

    const handleEditClick = (params) => () => {
        window.open('/application/' + params.row.id);
    };

    const columns = [
        {
            id: 'itemNo',
            field: 'itemNo',
            headerName: 'Item No.',
            flex: 1,
            minWidth: 50,
            renderCell: (params) => {
                // const regex = /^(\D+)(\d+)$/;
                // const [, category, itemNo] = params.row.groupNo.match(regex);
                const itemNo = parseInt(params.row.groupNo.substring(1))
                return itemNo
            },
        },
        {
            field: 'category',
            headerName: 'Category',
            flex: 1,
            minWidth: 50,
            renderCell: (params) => {
                const category = params.row.groupNo.substring(0, 1);
                return category
            }
        },
        {
            id: 'appNo',
            field: 'appNo',
            headerName: 'App No.',
            flex: 1,
            minWidth: 50,
            renderCell: (params) => {
                return clickableLink('/application/' + params.row.id, params.row.appNo)
            },
        },
        {
            id: 'user',
            field: 'user',
            headerName: 'User',
            flex: 1,
            minWidth: 50,
            renderCell: (params) => {
                // let user = params.row.enCompanyName != null ? params.row.enCompanyName : params.row.chCompanyName;
                let user = params.row.contactPerson;
                // user = user != null ? user : "";
                // if (params.row.sysType != null && params.row.sysType == "dummy"){
                //     user = "Dummy - PD"
                // }
                return <div>
                   {user}
                </div>;
            }
        },
        {
            id: 'contactPerson',
            field: 'contactPerson',
            headerName: 'Customer Name',
            flex: 1,
            minWidth: 50,
            renderCell: (params) => {
                let company = params.row.enCompanyName != null ? params.row.enCompanyName : params.row.chCompanyName;
                company = company != null ? company : "";
                if (params.row.sysType != null && params.row.sysType == "dummy"){
                    company =  params.row.custName
                }
                return <div>
                    {company}
                </div>;
            }
        },
        {
            id: 'careOf',
            field: 'careOf',
            headerName: "Customer's Client/Case No.",
            flex: 2,
            minWidth: 200,
            renderCell: (params) => {
                let careOf = params.row.careOf
                // if (params.row.sysType != null && params.row.sysType == "dummy"){
                //     careOf =  ''
                // }
                return <div>
                    {careOf}
                </div>;
            }
        },
        {
            id: 'dimension',
            field: 'dimension',
            headerName: 'Dimension',
            flex: 1,
            minWidth: 100,
            valueGetter: (params) => {
                let length = params.row.length
                // let colCount = params.row.colCount
                let noOfPages = params.row.noOfPages
                let dimension = 0
                if (noOfPages != null){
                    dimension = length*noOfPages
                }else{
                    dimension = length
                }
                return dimension;
            }
        },
        {
            id: 'fee',
            field: 'fee',
            headerName: 'Amount($)',
            flex: 1,
            minWidth: 100,
            valueGetter: (params) => {
                return FormatUtils.currencyFormat(params?.value);
            }
        },
        {
            id: 'emailAddress',
            field: 'emailAddress',
            headerName: 'Contact E-mail Address',
            flex:2,
            minWidth: 100,
            valueGetter: (params) => {
                let email = params.row.emailBus != null && params.row.emailBus != ""  ? params.row.emailBus : params.row.emailAddress;
                email = email != null ? email : "";
                if (params.row.sysType != null && params.row.sysType == "dummy"){
                    email =  params.row.remarks
                }
                return email;
            },
        },
        {
            id: 'deadline',
            field: 'deadline',
            headerName: 'Payment Deadline',
            flex: 2,
            minWidth: 100,
            renderCell: (params) => {
                return <>{DateUtils.dateStr(params.row.closingDate) + " 12noon"}</>;
            }
        },
        {
            id: 'exported',
            field: 'exported',
            headerName: 'Exported',
            flex: 1,
            minWidth: 50,
            renderCell: (params) => {
                let exported = params.row.exported ? "Y" : "N";
                return exported
            }
        },
    ];

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

            <FiDataGrid
                sx={_sx}
                getRowHeight={() => 'auto'}
                columns={columns}
                customPageSize={10}
                onRowDoubleClick={handleEditClick}
                doLoad={{
                    url: _searchCriteria.issueId>0?UrlUtils.GDN_VIEW:null,
                    params: {
                        issueId: _searchCriteria.issueId
                    },
                    // callback: (responseData) => {
                    //     setPaymentCount(responseData.paymentCount);
                    //     setPublishCount(responseData.publishCount);
                    // }
                }}
            />
        </div>
    );
}
