// 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 { Toast } from "@coreai-ds/react-components";
import { ToastTitle } from "@coreai-ds/react-components";
import { ToastTrigger } from "@coreai-ds/react-components";
import { Link } from "@coreai-ds/react-components";
import { ToastBody } from "@coreai-ds/react-components";
import { ToastFooter } from "@coreai-ds/react-components";
import { Toaster } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import * as React from 'react';

export const FocusKeyboardShortcut = (): JSXElement => {
    const toasterId = useId('toaster');
    const { dispatchToast } = useToastController(toasterId);
    const notify = () => dispatchToast(<Toast>
        <ToastTitle action={<ToastTrigger>
              <Link>Dismiss</Link>
            </ToastTrigger>}>
          Email sent
        </ToastTitle>
        <ToastBody subtitle="Subtitle">This is a toast body</ToastBody>
        <ToastFooter>
          <Link>Action</Link>
          <Link>Action</Link>
        </ToastFooter>
      </Toast>, { intent: 'success' });
    return (<>
      <Toaster limit={3} shortcuts={{ focus: e => e.ctrlKey && e.key === 'm' }} toasterId={toasterId}/>
      <Button onClick={notify}>Make toast</Button>
    </>);
};

export default FocusKeyboardShortcut;