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

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import { Switch } 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 { Button } from "@coreai-ds/react-components";
import { DismissRegular } from "@fluentui/react-icons";

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

export const ManualLayout = (): JSXElement => {
    const [single, setSingle] = React.useState(true);
    return (<>
      <Switch label={single ? 'Single line layout' : 'Multi line layout'} checked={single} onChange={(_, { checked }) => setSingle(checked)}/>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        {intents.map(intent => (<MessageBar key={intent} layout={single ? 'singleline' : 'multiline'} intent={intent}>
            <MessageBarBody>
              <MessageBarTitle>Descriptive title</MessageBarTitle>
              Message providing information to the user with actionable insights. <Link>Link</Link>
            </MessageBarBody>
            <MessageBarActions containerAction={<Button aria-label="dismiss" appearance="transparent" icon={<DismissRegular />}/>}>
              <Button>Action</Button>
              <Button>Action</Button>
            </MessageBarActions>
          </MessageBar>))}
      </div>
    </>);
};

export default ManualLayout;