// 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 { Field } from "@coreai-ds/react-components";
import { RadioGroup } from "@coreai-ds/react-components";
import { Radio } from "@coreai-ds/react-components";
import { Toaster } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";

export const MultipleToasters = (): JSXElement => {
    const first = useId('toaster-1');
    const second = useId('toaster-2');
    const [toaster, setToaster] = React.useState(first);
    const { dispatchToast: dispatchFirstToast } = useToastController(first);
    const { dispatchToast: dispatchSecondToast } = useToastController(second);
    const notify = () => {
        if (toaster === first) {
            dispatchFirstToast(<Toast>
          <ToastTitle>First toaster</ToastTitle>
        </Toast>, { intent: 'info' });
        }
        else {
            dispatchSecondToast(<Toast>
          <ToastTitle>Second toaster</ToastTitle>
        </Toast>, { intent: 'info' });
        }
    };
    return (<>
      <Field label="Choose toaster">
        <RadioGroup value={toaster} onChange={(e, data) => setToaster(data.value)}>
          <Radio label="First toaster" value={first}/>
          <Radio label="Second toaster" value={second}/>
        </RadioGroup>
      </Field>
      <Toaster toasterId={first} position="bottom-end"/>
      <Toaster toasterId={second} position="top-end"/>
      <Button onClick={notify}>Make toast</Button>
    </>);
};

export default MultipleToasters;