import React, { useCallback, useMemo } from 'react';
import { Typography, LinearProgress, makeStyles, List, ListItem, Checkbox, ListItemText, ListItemSecondaryAction, Divider, FormControlLabel } from '@material-ui/core';
import { StatusChip } from '../UI/dataDisplay/status/StatusChip';
import { UnityFluentIcon } from '../utilities/iconLibrary/UnityFluentIcon';
import { getUnityIconFromName } from '../utilities/iconLibrary/UnityIconLibrary';
import { getIconFromName } from '../utilities/tree/TreeUtilities';
import { useActions } from '../hooks/useActions';
import { SplitScreenTypeEnums } from '../enums/unitySystemEnums';
import { CompleteReminderSwitch } from './CompleteReminderSwitch';
import { executeQueryWithParameters } from '../udp/utilities/methodUtils';
const useStyles = makeStyles((theme) => ({
    root: {},
    item: {
        display: 'flex',
        '& .MuiListItem-container': {
            width: '100%'
        },
        '& .MuiListItem-container > .MuiListItem-button': {
            paddingLeft: 0,
            paddingRight: 0
        }
    }
}));
export const RemindersCard = (props) => {
    const { reminders, setReminders, loading, getNodeToLoad, onLoadedNodeClick, getIcon = () => { }, updateRemindersAcknowledgement } = props;
    const classes = useStyles(props);
    const { openSplitScreen } = useActions();
    const handleSwitchChange = useCallback(async (event, reminder) => {
        const updatedReminder = Object.assign({}, reminder);
        updatedReminder.checked = event.target.checked;
        await updateRemindersAcknowledgement([updatedReminder]);
    }, [updateRemindersAcknowledgement]);
    const getCompleteSwitch = useCallback((reminder) => (React.createElement(FormControlLabel, { control: React.createElement(CompleteReminderSwitch, { size: "small", checked: (reminder === null || reminder === void 0 ? void 0 : reminder.acknowledged) || false, onChange: (event) => handleSwitchChange(event, reminder) }), label: "Complete", style: { marginRight: 8 } })), [handleSwitchChange]);
    const getStatusLabel = useCallback((date) => {
        const day = 1000 * 60 * 60 * 24;
        const reminderDate = new Date(date).getTime();
        if (reminderDate >= Date.now() - day * 7) {
            // Less than or equal 7 days past reminder date
            return Math.floor((Date.now() - reminderDate) / (1000 * 3600 * 24));
        }
        else if (reminderDate < Date.now() - day * 7 &&
            reminderDate >= Date.now() - day * 30) {
            // Greater than 7 days but less than or equal to 30 days past reminder date
            return Math.floor((Date.now() - reminderDate) / (1000 * 3600 * 24));
        }
        else if (reminderDate < Date.now() - day * 30 &&
            reminderDate >= Date.now() - day * 180) {
            // Greater 30 days but less than or equal to 180 days past reminder date
            return Math.floor((Date.now() - reminderDate) / (1000 * 3600 * 24));
        }
        else if (reminderDate < Date.now() - day * 180) {
            // Greater than 180 days past reminder date
            return Math.floor((Date.now() - reminderDate) / (1000 * 3600 * 24));
        }
    }, []);
    const getStatusColor = useCallback((date) => {
        const day = 1000 * 60 * 60 * 24;
        const reminderDate = new Date(date).getTime();
        if (reminderDate >= Date.now() - day * 7) {
            // Less than or equal 7 days past reminder date
            return '';
        }
        else if (reminderDate < Date.now() - day * 7 &&
            reminderDate >= Date.now() - day * 30) {
            // Greater than 7 days but less than or equal to 30 days past reminder date
            return 'info';
        }
        else if (reminderDate < Date.now() - day * 30 &&
            reminderDate >= Date.now() - day * 180) {
            // Greater 30 days but less than or equal to 180 days past reminder date
            return 'warning';
        }
        else if (reminderDate < Date.now() - day * 180) {
            // Greater than 180 days past reminder date
            return 'error';
        }
    }, []);
    const handleReminderCheck = useCallback((evt, reminder) => {
        const updatedReminders = [...reminders];
        const matchingReminders = updatedReminders.filter((r) => r.id === reminder.id);
        matchingReminders === null || matchingReminders === void 0 ? void 0 : matchingReminders.forEach((matchingReminder) => (matchingReminder.checked = evt.target.checked));
        setReminders(updatedReminders);
    }, [reminders, setReminders]);
    const handleReminderClick = useCallback((nodeToLoad, reminder) => {
        onLoadedNodeClick(nodeToLoad);
        openSplitScreen({
            open: true,
            action: null,
            type: SplitScreenTypeEnums.Reminders,
            params: {
                id: (reminder === null || reminder === void 0 ? void 0 : reminder.id) || '',
                additionalInputs: reminder ? getCompleteSwitch(reminder) : null
            }
        });
    }, [onLoadedNodeClick, openSplitScreen, getCompleteSwitch]);
    return loading ? (React.createElement(LinearProgress, null)) : (reminders === null || reminders === void 0 ? void 0 : reminders.length) ? (React.createElement(List, { className: classes.root }, reminders.map((reminder) => {
        const icon = getIcon(reminder);
        const nodeToLoad = getNodeToLoad(reminder);
        return (React.createElement(React.Fragment, null, React.createElement("div", { className: classes.item, key: reminder.id }, React.createElement(Checkbox, { id: "udpRecord-RemindersCard-Checkbox", udprecordid: "udpRecord-RemindersCard-Checkbox", edge: "start", checked: reminder.checked || reminder.acknowledged, disableRipple: true, size: "small", onChange: (evt) => handleReminderCheck(evt, reminder), disabled: reminder.acknowledged }), React.createElement(ListItem, { id: "udpRecord-ReminderCard-Item", udprecordid: "udpRecord-ReminderCard-Item", key: reminder.id, dense: true, subject: reminder.subject, removePadding: true, button: true, onClick: () => handleReminderClick(nodeToLoad, reminder) }, React.createElement(ListItemText, null, React.createElement("div", { style: { display: 'block' } }, React.createElement(Typography, { style: { lineHeight: '0.9rem', fontSize: '0.8rem' } }, reminder.subject)), React.createElement(Typography, { style: {
                lineHeight: '0.8rem',
                fontSize: '0.7rem',
                fontWeight: 400,
                color: 'rgba(0, 0, 0, 0.54)'
            } }, new Date(reminder.reminderDate).toDateString())), React.createElement(ListItemSecondaryAction, null, React.createElement(StatusChip, { status: getStatusColor(reminder.reminderDate), label: getStatusLabel(reminder.reminderDate), icon: React.createElement(UnityFluentIcon, { type: icon === null || icon === void 0 ? void 0 : icon.type, icon: (icon === null || icon === void 0 ? void 0 : icon.type) === 'unity'
                    ? getUnityIconFromName((icon === null || icon === void 0 ? void 0 : icon.name) || '')
                    : getIconFromName((icon === null || icon === void 0 ? void 0 : icon.name) || '') }) })))), React.createElement(Divider, { style: { height: 1 } })));
    }))) : (React.createElement(Typography, null, "All Reminders Completed"));
};
//# sourceMappingURL=RemindersCard.js.map