// 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 { tokens } from "@coreai-ds/react-components";
import * as React from 'react';
import type { MessageBarIntent } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { MessageBarGroup } from "@coreai-ds/react-components";
import { MessageBar } from "@coreai-ds/react-components";
import { MessageBarBody } from "@coreai-ds/react-components";
import { MessageBarTitle } from "@coreai-ds/react-components";
import { Link } from "@coreai-ds/react-components";
import { MessageBarActions } from "@coreai-ds/react-components";
import { DismissRegular } from "@fluentui/react-icons";

const useStyles = makeStyles({
    messageBarGroup: {
        padding: tokens.spacingHorizontalMNudge,
        display: 'flex',
        flexDirection: 'column',
        marginTop: '10px',
        gap: '10px',
        height: '300px',
        overflow: 'auto',
        border: `2px solid ${tokens.colorBrandForeground1}`,
    },
    buttonGroup: {
        display: 'flex',
        justifyContent: 'end',
        gap: '5px',
    },
});

interface ExampleMessage {
    intent: MessageBarIntent;
    id: number;
}

const intents: MessageBarIntent[] = ['info', 'warning', 'error', 'success'];

export const Dismiss = (): JSXElement => {
    const styles = useStyles();
    const counterRef = React.useRef(0);
    const [messages, setMessages] = React.useState<ExampleMessage[]>([]);
    const addMessage = () => {
        const intent = intents[Math.floor(Math.random() * intents.length)];
        const newMessage = { intent, id: counterRef.current++ };
        setMessages(s => [newMessage, ...s]);
    };
    const clearMessages = () => setMessages([]);
    const dismissMessage = (messageId: number) => setMessages(s => s.filter(entry => entry.id !== messageId));
    return (<>
      <div className={styles.buttonGroup}>
        <Button appearance="primary" onClick={addMessage}>
          Add message
        </Button>
        <Button onClick={clearMessages}>Clear</Button>
      </div>

      <MessageBarGroup className={styles.messageBarGroup}>
        {messages.map(({ intent, id }) => (<MessageBar key={`${intent}-${id}`} intent={intent}>
            <MessageBarBody>
              <MessageBarTitle>Descriptive title</MessageBarTitle>
              Message providing information to the user with actionable insights. <Link>Link</Link>
            </MessageBarBody>
            <MessageBarActions containerAction={<Button onClick={() => dismissMessage(id)} aria-label="dismiss" appearance="transparent" icon={<DismissRegular />}/>}/>
          </MessageBar>))}
      </MessageBarGroup>
    </>);
};

export default Dismiss;