// 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 { useToastController } from "@coreai-ds/react-components";
import * as React from 'react';
import type { ToastPosition } 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 ToastPositions = (): JSXElement => {
    const toasterId = useId('toaster');
    const { dispatchToast } = useToastController(toasterId);
    const [position, setPosition] = React.useState<ToastPosition>('top');
    const notify = () => dispatchToast(<Toast>
        <ToastTitle>This toast is {position}</ToastTitle>
      </Toast>, { position, intent: 'success' });
    return (<>
      <Field label="Select a position">
        <RadioGroup value={position} onChange={(e, data) => setPosition(data.value as ToastPosition)}>
          <Radio label="bottom" value="bottom"/>
          <Radio label="bottom-start" value="bottom-start"/>
          <Radio label="bottom-end" value="bottom-end"/>
          <Radio label="top" value="top"/>
          <Radio label="top-start" value="top-start"/>
          <Radio label="top-end" value="top-end"/>
        </RadioGroup>
      </Field>
      <Toaster toasterId={toasterId}/>
      <Button onClick={() => notify()}>Make toast</Button>
    </>);
};

export default ToastPositions;