import * as React from 'react';
import { HistoryChanges } from '../types/column.type';
import {
    Avatar,
    CircularProgress,
    List,
    ListItem,
    ListItemAvatar,
    ListItemText
} from '@mui/material';
import { Edit, ModeCommentTwoTone } from '@mui/icons-material';
import {
    TableArrowTooltip,
    TableBodyHistoryButtonContent,
    TableBodyHistoryMenuPopup,
    TableBodyHistoryButton,
} from './style';

interface HistoryTooltipProps {
    className?: string,
    messages: {
        changesHistory: string,
        noChanges: string,
    },
    formatValue?: (value: any) => string,
    getChangeHistory?: () => Promise<HistoryChanges>,
}
export const HistoryTooltip: React.FC<HistoryTooltipProps> = ({ className, messages, formatValue, getChangeHistory }) => {
    const [history, setHistory] = React.useState<any>(null);
    const [show, setShow] = React.useState<boolean>(false);

    const formatChangeHistoryDate = (change: any) => {
        const date = change && change.date
            ? typeof change.date === 'number'
                ? change.date
                : isNaN(Number(change.date))
                    ? 0
                    : Number(change.date)
            : 0;
        return date
            ? `(${new Date(date).toDateString()}, ${new Date(date).toLocaleTimeString('en-US')}) `
            : '';
    }
    const handleCellContextMenuOpen = (event: any) => {
        setShow(!show);

        if (getChangeHistory) {
            getChangeHistory()
                .then(response => {
                    if (response && response.changes) {
                        setHistory(response.changes);
                    }
                });
        }
    }
    const onClose = () => {
        setShow(!show);
        setHistory(null);
    };

    return (
        <TableArrowTooltip arrow title={messages.changesHistory} placement="top">
            <TableBodyHistoryButtonContent>
                <TableBodyHistoryMenuPopup arrow
                    open={show}
                    onClose={onClose}
                    content={
                        history != null ? (
                            <List>
                                {
                                    history && history.length > 0
                                        ? history.map((change: any, key: any) => (
                                            <ListItem key={key}>
                                                <ListItemAvatar>
                                                    <Avatar>
                                                        <Edit />
                                                    </Avatar>
                                                </ListItemAvatar>
                                                <ListItemText
                                                    primary={
                                                        formatValue
                                                            ? formatValue(change.value)
                                                            : change.value
                                                    }
                                                    secondary={`${formatChangeHistoryDate(change)}${change.user}`} />
                                            </ListItem>
                                        ))
                                        : history && <span>{messages.noChanges}</span>
                                }
                            </List>
                        ) : (
                            <CircularProgress style={{ width: '25px', height: '25px' }} />
                        )
                    }
                    placement="bottom"
                >
                    <TableBodyHistoryButton
                        style={{
                            width: '16px !important',
                            height: '16px !important',
                        }}
                        className={
                            !show && className
                                ? className
                                : ''
                        }
                        edge="start"
                        onClick={handleCellContextMenuOpen}>

                        <ModeCommentTwoTone
                            style={{
                                width: '16px',
                                height: '16px',
                            }} />
                    </TableBodyHistoryButton>
                </TableBodyHistoryMenuPopup>
            </TableBodyHistoryButtonContent>
        </TableArrowTooltip>
    );
}