import { Meta } from '@storybook/addon-docs';
import ModalsExample from '../../ui/ModalsExample';

<Meta title="Modals" />

# Modals
This document covers how to use our system modals.

## How it works?
1. Create your modal components. Don't forget to wrap each with the `ModalWrapper` for default style and animation - You can pass generated props to the wrapper. Use the hook `useModal` to access the modal props.

```jsx
// /modals/index.ts
import { Button, ModalWrapper, Text, openModal, useModal } from '@impact-market/ui';

export const Modal = () => {
    const { handleClose, date } = useModal();

    return (
        <ModalWrapper maxW={20} padding={1.5}>
            <Text large>This is an example alert modal opened at {date.toString()}!</Text>
            <Button fluid mt={1.5} onClick={() => handleClose(() => openModal('secondModal'))}>
                Close Modal
            </Button>
        </ModalWrapper>
    );
};

export const Modal2 = () => {
    const { handleClose } = useModal();

    return (
        <ModalWrapper maxW={20} padding={1.5}>
            <Text large>And another modal</Text>
            <Button fluid mt={1.5} onClick={() => handleClose()}>
                Close Modal
            </Button>
        </ModalWrapper>
    );
};
```

2. Add the `ModalManager` with an object with the modals
```jsx
// _app.ts
import { ModalManager } from "@impact-market/ui";
import { Modal, Modal2 } from './modals';

const modals = {
    example: Modal,
    exampleTwo: Modal2
}

// ...

<App>
    {/* ... */}
    <ModalManager modals={modals} />
    {/* ... */}
</App>
```

2. Import the `openModal` function and use it as you like. You can pass an object as props as second argument then extract those using `useModal` hook.

```jsx
// Some component
import { openModal } from '@impact-market/ui';

<>
    <Button onClick={() => openModal('example', { date: new Date() })}>Open modal</Button>
</>
```

## Try it
<ModalsExample />