// material-ui
import * as React from 'react';
import { useTheme, useMediaQuery } from '@mui/material';
import {FiDataGrid} from "components/FiDataGrid";
import * as DateUtils from "utils/DateUtils"
import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
import {GET_PUBLIC_NOTICE_APPLY_DETAIL_STATUS_HISTORY } from "utils/ApiPathConst"


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

export default function StatusHistoryTab({appId, setCount}) {
    const { useState, useEffect } = React;
    const theme = useTheme();
    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));

    const [_appId, set_appId] = useState({});
    useEffect(() => {
        set_appId(appId);
    }, [appId]);
    useEffect(() => {
        set_appId(appId);
    }, []);

    const renderHeaderWithAria = (params) => (
        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
    );

    const columns = [
        {
            id: 'created',
            field: 'created',
            headerName: 'Date',
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderHeader: renderHeaderWithAria,
            valueGetter: (params) => {
                return DateUtils.datetimeStr(params?.value);
            }
            
        },
        {
            id: 'createdBy',
            field: 'createdBy',
            headerName: 'Changed By',
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderHeader: renderHeaderWithAria,
        },
        {
            id: 'status',
            field: 'status',
            headerName: 'Status',
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderHeader: renderHeaderWithAria,
            renderCell: (params) => {
                return StatusUtils.getStatusEng(params);
            },
        },
    ];

    return (
        <div style={{height:'20%', width: '100%'}}>
            <FiDataGrid
                columns={columns}
                customPageSize={10}
                doLoad={{
                    url: GET_PUBLIC_NOTICE_APPLY_DETAIL_STATUS_HISTORY+"/"+_appId,
                    params: {},
                    callback: function (responseData) {
                        setCount(responseData?.count);
                    }
                }}
            />
        </div>
    );
}