import {
    Box,
    LinearProgress,
    Paper,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    Typography
} from "@mui/material";
import {useTranslations} from "next-intl";
import {GET_HISTORY_DETAIL} from "@/core/data/apiRoutes";
import moment from "jalali-moment";
import PrintHistory from "@/components/dashboard/loan-history/Form/HistoryForm/PrintHistory";
import useRequest from "@/lib/app/hooks/useRequest";
import {useEffect, useState} from "react";

const TableContent = ({rowId}) => {
    const t = useTranslations();
    const requestServer = useRequest({auth: true, notification: false})
    const [historyDetails, setHistoryDetails] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(false);

    useEffect(() => {
        requestServer(`${GET_HISTORY_DETAIL}/${rowId}`, 'get').then((response) => {
            setIsLoading(false);
            setHistoryDetails(response.data.data);
        }).catch(() => {
            setError(true);
        })
    }, []);

    return (<Box>
            {error ? (<Typography sx={{
                padding: 2, display: "flex", alignItems: "center", justifyContent: "center"
            }}>{t("LoanHistory.Table_history_error")}</Typography>) : (isLoading ? (
                <LinearProgress sx={{width: "100%"}}/>) : (historyDetails.latest_histories.length === 0 ? (<Typography
                sx={{
                    padding: 2, display: "flex", alignItems: "center", justifyContent: "center"
                }}
                variant={'h6'}>{t("LoanHistory.empty_history_detail")}</Typography>) : (<Paper elevation={0} sx={{
                width: '100%', overflow: 'hidden', '*::-webkit-scrollbar': {
                    width: '0.5em'
                }, '*::-webkit-scrollbar-thumb': {
                    backgroundColor: 'primary.main',
                }
            }}>
                <TableContainer sx={{maxHeight: 600}}>
                    <Table stickyHeader sx={{minWidth: 800}}>
                        <TableHead>
                            <TableRow>
                                <TableCell>{t("LoanHistory.Table_head_name")}</TableCell>
                                <TableCell>{t("LoanHistory.Table_head_date")}</TableCell>
                                <TableCell>{t("LoanHistory.Table_head_position")}</TableCell>
                                <TableCell>{t("LoanHistory.Table_head_action")}</TableCell>
                                <TableCell>{t("LoanHistory.Table_head_expert_description")}</TableCell>
                                <TableCell>{t("LoanHistory.Table_head_file")}</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            <TableRow
                                sx={{
                                    '&:last-child td, &:last-child th': {border: 0}
                                }}
                            >
                                <TableCell>
                                    {historyDetails.latest_histories[0].expert.name}
                                </TableCell>
                                <TableCell>{moment(historyDetails.latest_histories[0].created_at).locale("fa").format("HH:mm | yyyy/MM/DD")}</TableCell>
                                <TableCell>{historyDetails.latest_histories[0].expert.position}</TableCell>
                                <TableCell>{historyDetails.state_name}</TableCell>
                                <TableCell>{historyDetails.latest_histories[0].expert_description}</TableCell>
                                <TableCell>
                                    {historyDetails.latest_histories[0].attachments.map((attachment, index) =>
                                        <PrintHistory
                                            key={index}
                                            attachment={attachment}/>)}
                                </TableCell>
                            </TableRow>
                            {historyDetails.latest_histories.map((latest_history, index) => {
                                const _name = historyDetails.latest_histories.length > (index + 1) ? historyDetails.latest_histories[index + 1].expert.name : '-'
                                const _created_at = historyDetails.latest_histories.length > (index + 1) ? moment(historyDetails.latest_histories[index + 1].created_at).locale("fa").format("HH:mm | yyyy/MM/DD") : '-'
                                const _position = historyDetails.latest_histories.length > (index + 1) ? historyDetails.latest_histories[index + 1].expert.position : '-'
                                const _expert_description = historyDetails.latest_histories.length > (index + 1) ? historyDetails.latest_histories[index + 1].expert_description : '-'
                                const _attachments = historyDetails.latest_histories.length > (index + 1) ? historyDetails.latest_histories[index + 1].attachments : []
                                return (<TableRow
                                    key={index}
                                    sx={{
                                        '&:last-child td, &:last-child th': {border: 0}
                                    }}
                                >
                                    <TableCell> {_name}</TableCell>
                                    <TableCell>{_created_at}</TableCell>
                                    <TableCell>{_position}</TableCell>
                                    <TableCell>{latest_history.previous_state_name}</TableCell>
                                    <TableCell>{_expert_description}</TableCell>
                                    <TableCell>
                                        {_attachments.map((attachment, index) => <PrintHistory key={index}
                                                                                               attachment={attachment}/>)}
                                    </TableCell>
                                </TableRow>)
                            })}
                        </TableBody>
                    </Table>
                </TableContainer>
            </Paper>)))}
        </Box>

    )
}
export default TableContent