// material-ui
import * as React from 'react';
import {
    Button, useMediaQuery
} from '@mui/material';
import { useNavigate } from "react-router-dom";
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 {useIntl} from "react-intl";
// import * as StatusUtils from "./PublicNoteStatusUtils";
// ==============================|| EVENT TABLE ||============================== //

export default function SubmittedTab({ rows }) {

    const navigate = useNavigate()
    const theme = useTheme();
    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
    const intl = useIntl();

    const handleEditClick = (params) => () => {
        navigate('/paymentPage/details/' + params.row.id);
    };

    const columns = [
        {
            field: 'actions',
            headerName: intl.formatMessage({id: 'payId'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            cellClassName: 'actions',
            renderCell: (params) => {
                return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
            },
        },
        {
            id: 'transDateTime',
            field: 'transDateTime',
            headerName: intl.formatMessage({id: 'payDate'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            valueGetter: (params) => {
                return DateUtils.datetimeStr(params.value);
            }
        },
        {
            id: 'status',
            field: 'status',
            headerName: intl.formatMessage({id: 'payStatus'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderCell: (params) => {
                return PaymentStatus.getStatus_Cht(params);
            }
        },
        {
            id: 'payAmount',
            field: 'payAmount',
            headerName: intl.formatMessage({id: 'fee'}),
            width: 150,
            valueGetter: (params) => {
                return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
            }
        },
    ];

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



}