// 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 { ToastIntent } from "@coreai-ds/react-components";
import { Toast } from "@coreai-ds/react-components";
import { ToastTitle } from "@coreai-ds/react-components";
import { Spinner } from "@coreai-ds/react-components";
import { Avatar } 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 Intent = (): JSXElement => {
    const toasterId = useId('toaster');
    const { dispatchToast } = useToastController(toasterId);
    const [intent, setIntent] = React.useState<ToastIntent | 'progress' | 'avatar'>('success');
    const notify = () => {
        switch (intent) {
            case 'progress':
                dispatchToast(<Toast>
            <ToastTitle media={<Spinner size="tiny"/>}>Progress toast</ToastTitle>
          </Toast>);
                break;
            case 'avatar':
                dispatchToast(<Toast>
            <ToastTitle media={<Avatar name="Erika Mustermann" size={16}/>}>Avatar toast</ToastTitle>
          </Toast>);
                break;
            case 'error':
            case 'info':
            case 'success':
            case 'warning':
                dispatchToast(<Toast>
            <ToastTitle>Toast intent: {intent}</ToastTitle>
          </Toast>, { intent });
                break;
        }
    };
    return (<>
      <Field label="Select a intent">
        <RadioGroup value={intent} onChange={(e, data) => setIntent(data.value as ToastIntent)}>
          <Radio label="success" value="success"/>
          <Radio label="info" value="info"/>
          <Radio label="warning" value="warning"/>
          <Radio label="error" value="error"/>
          <Radio label="progress (custom media slot)" value="progress"/>
          <Radio label="avatar (custom media slot)" value="avatar"/>
        </RadioGroup>
      </Field>
      <Toaster toasterId={toasterId}/>
      <Button onClick={() => notify()}>Make toast</Button>
    </>);
};

export default Intent;