// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import { useId } from "@coreai-ds/react-components";
import { useToastController } from "@coreai-ds/react-components";
import * as React from 'react';
import type { ToastStatus } from "@coreai-ds/react-components";
import { Toast } from "@coreai-ds/react-components";
import { ToastTitle } from "@coreai-ds/react-components";
import { Link } from "@coreai-ds/react-components";
import { ToastBody } from "@coreai-ds/react-components";
import { ToastFooter } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";
import { Toaster } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    root: {
        display: 'flex',
        gap: '20px',
    },
    button: {
        display: 'block',
    },
    logContainer: {
        display: 'flex',
        flexDirection: 'column',
    },
    logLabel: {
        color: tokens.colorNeutralForegroundOnBrand,
        backgroundColor: tokens.colorBrandBackground,
        width: 'fit-content',
        fontWeight: tokens.fontWeightBold,
        padding: '2px 12px',
    },
    log: {
        overflowY: 'auto',
        boxShadow: tokens.shadow16,
        position: 'relative',
        minWidth: '200px',
        height: '200px',
        border: `2px solid ${tokens.colorBrandBackground}`,
        padding: '12px',
    },
});

export const ToastLifecycle = (): JSXElement => {
    const styles = useStyles();
    const toasterId = useId('toaster');
    const labelId = useId();
    const { dispatchToast } = useToastController(toasterId);
    const [statusLog, setStatusLog] = React.useState<[
        number,
        ToastStatus
    ][]>([]);
    const [dismissed, setDismissed] = React.useState(true);
    const notify = () => {
        dispatchToast(<Toast>
        <ToastTitle action={<Link>Undo</Link>}>Email sent</ToastTitle>
        <ToastBody subtitle="Subtitle">This is a toast body</ToastBody>
        <ToastFooter>
          <Link>Action</Link>
          <Link>Action</Link>
        </ToastFooter>
      </Toast>, {
            timeout: 1000,
            intent: 'success',
            onStatusChange: (e, { status: toastStatus }) => {
                setDismissed(toastStatus === 'unmounted');
                setStatusLog(prev => [[Date.now(), toastStatus], ...prev]);
            },
        });
    };
    return (<>
      <div className={styles.root}>
        <div>
          <Button className={styles.button} disabledFocusable={!dismissed} onClick={notify}>
            Make toast
          </Button>
          <Button className={styles.button} onClick={() => setStatusLog([])}>
            Clear log
          </Button>
        </div>
        <div className={styles.logContainer}>
          <div className={styles.logLabel} id={labelId}>
            Status log
          </div>
          <div role="log" aria-labelledby={labelId} className={styles.log}>
            {statusLog.map(([time, toastStatus], i) => {
            const date = new Date(time);
            return (<div key={i}>
                  {date.toLocaleTimeString()} <Text weight="bold">{toastStatus}</Text>
                </div>);
        })}
          </div>
        </div>
      </div>
      <Toaster toasterId={toasterId}/>
    </>);
};

export default ToastLifecycle;