// 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";

export const UpdateToast = (): JSXElement => {
    const toastId = useId('toast');
    const toasterId = useId('toaster');
    const [unmounted, setUnmounted] = React.useState(true);
    const { dispatchToast, updateToast } = useToastController(toasterId);
    const notify = () => {
        dispatchToast(<Toast>
        <ToastTitle>This toast never closes</ToastTitle>
      </Toast>, {
            toastId,
            intent: 'warning',
            timeout: -1,
            onStatusChange: (e, { status }) => setUnmounted(status === 'unmounted'),
        });
        setUnmounted(false);
    };
    const update = () => updateToast({
        content: (<Toast>
          <ToastTitle>This toast will close soon</ToastTitle>
        </Toast>),
        intent: 'success',
        toastId,
        timeout: 2000,
    });
    return (<>
      <Toaster toasterId={toasterId}/>
      <Button onClick={unmounted ? notify : update}>{unmounted ? 'Make toast' : 'Update toast'}</Button>
    </>);
};

export default UpdateToast;