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

import type { JSXElement } from "@coreai-ds/react-components";
import { useId } from "@coreai-ds/react-components";
import * as React from 'react';
import { useToastController } from "@coreai-ds/react-components";
import { Toast } from "@coreai-ds/react-components";
import { ToastTitle } from "@coreai-ds/react-components";
import { Toaster } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { ToggleButton } from "@coreai-ds/react-components";
import { PlayFilled } from "@fluentui/react-icons";
import { PauseFilled } from "@fluentui/react-icons";

export const PauseAndPlay = (): JSXElement => {
    const toasterId = useId('toaster');
    const toastId = useId('example');
    const [unmounted, setUnmounted] = React.useState(true);
    const [paused, setPaused] = React.useState(false);
    const { pauseToast, playToast, dispatchToast } = useToastController(toasterId);
    const notify = () => {
        dispatchToast(<Toast>
        <ToastTitle>This is a toast</ToastTitle>
      </Toast>, {
            toastId,
            intent: 'success',
            onStatusChange: (e, { status }) => {
                setUnmounted(status === 'unmounted');
                setPaused(false);
            },
        });
        setUnmounted(false);
    };
    const toggle = () => {
        if (paused) {
            playToast(toastId);
            setPaused(false);
        }
        else {
            pauseToast(toastId);
            setPaused(true);
        }
    };
    return (<>
      <Toaster toasterId={toasterId}/>
      <Button disabledFocusable={!unmounted} onClick={notify}>
        Make toast
      </Button>
      <ToggleButton icon={paused ? <PlayFilled /> : <PauseFilled />} disabledFocusable={unmounted} onClick={toggle} checked={paused}>
        {paused ? 'Play' : 'Pause'} toast
      </ToggleButton>
    </>);
};

export default PauseAndPlay;