// material-ui
import * as React from 'react';
import {
    useMediaQuery
} from '@mui/material';
import {FiDataGrid} from "components/FiDataGrid";
import * as FormatUtils from "utils/FormatUtils"
import * as DateUtils from "utils/DateUtils"
import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
import {useTheme} from "@emotion/react";
import { clickableLink } from 'utils/CommonFunction';
// import * as StatusUtils from "./PublicNoteStatusUtils";
// ==============================|| EVENT TABLE ||============================== //

export default function SubmittedTab({ rows }) {

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

    const columns = [
        {
            field: 'actions',
            headerName: 'Trans. No.',
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            cellClassName: 'actions',
            renderCell: (params) => {
                return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
            },
        },
        {
            id: 'transDateTime',
            field: 'transDateTime',
            headerName: 'Trans. Date',
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            valueGetter: (params) => {
                return DateUtils.datetimeStr(params.value);
            }
        },
        {
            id: 'status',
            field: 'status',
            headerName: 'Status',
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderCell: (params) => {
                return PaymentStatus.getStatus_Eng(params);
            }
        },
        {
            id: 'payAmount',
            field: 'payAmount',
            headerName: 'Amount',
            width: 150,
            valueGetter: (params) => {
                return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
            }
        },
    ];

    return (
        <>
            <div style={{ height:'20%', width: '98%' }}>
                <FiDataGrid
                    rows={rows}
                    columns={columns}
                    customPageSize={5}
                />
            </div>
        </>
    );



}