// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } 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 { Link } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";
import { Toaster } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    container: {
        border: '2px dashed green',
        height: '500px',
        width: '500px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative',
        marginTop: '20px',
    },
});

export const Inline = (): JSXElement => {
    const styles = useStyles();
    const toasterId = useId('toaster');
    const { dispatchToast } = useToastController(toasterId);
    const notify = () => dispatchToast(<Toast>
        <ToastTitle action={<Link>Undo</Link>}>Email sent</ToastTitle>
      </Toast>, { intent: 'success' });
    return (<>
      <Button onClick={notify}>Make toast</Button>
      <div className={styles.container}>
        <Text weight="bold">Toasts appear here</Text>

        <Toaster inline toasterId={toasterId} position="bottom"/>
      </div>
    </>);
};

export default Inline;