import Modal from "../Modal";
import { useModalHelper } from "./helpers";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { ComponentRules, createStoryMetaSettings, RelatedComponents, Tip, UsageGuidelines } from "../../../storybook";
import "./Modal.stories.scss";
import { Button, ModalContent, ModalFooter, ModalHeader } from "../../../components";
import {
  ATTENTION_BOX,
  TOAST,
  TOOLTIP
} from "../../../storybook/components/related-components/component-description-map";
import Settings from "../../../components/Icon/Icons/components/Settings";
import { useState } from "react";

export const metaSettings = createStoryMetaSettings({
  component: Modal,
  enumPropNamesArray: ["width"], // List enum props here
  iconPropNamesArray: [], // List props that are typed as icons here
  actionPropsArray: ["onClose"] // List the component's actions here
});

<Meta
  title="Feedback/Modal - (Coming Soon)"
  component={Modal}
  subcomponents={{ ModalHeader, ModalContent, ModalFooter }}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component documentation -->

# Modal

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Modal allows the user to focus on one task or a piece of information, by popping-up and blocking the page content until the modal task is completed, or until the user dismisses the action.

<Canvas>
  <Story name="Overview">
    {() => {
      const { openModalButton, modalButtons, show, closeModal, ref } = useModalHelper();
      return (
        <div>
          {openModalButton}
          <Modal
            id={"story-book-modal"}
            title={"Modal title"}
            triggerElement={ref.current}
            show={show}
            onClose={closeModal}
            closeButtonAriaLabel={"close"}
          >
            <ModalContent>
              <span className="modal-content">Modal content goes here</span>
            </ModalContent>
            <ModalFooter>{modalButtons}</ModalFooter>
          </Modal>
        </div>
      );
    }}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Modals appear centered on the page, with a visible backdrop dimming the rest of the page for focus.",
    "Modals height is dynamic according to its content.",
    "All modals must have a title and a close button",
    " By default, Modal will be closed by: clicking outside, the ESC key and the closing buttons"
  ]}
/>

<Tip>
  Set `alertDialog` to `true` in order to allow closing the modal only by the close buttons and not by ESC or by
  clicking outside. Learn more
</Tip>
<Tip>Use modal for short and non-frequent tasks. For common tasks consider using the main flow.</Tip>

## Variants

### Sizes

<Canvas>
  <Story name="Width variants - Normal">
    {() => {
      const { openModalButton, modalButtons, show, closeModal, ref } = useModalHelper({
        openButtonTitle: "Default"
      });
      return (
        <div>
          {openModalButton}
          <Modal
            id={"story-book-modal"}
            title={"Modal title"}
            triggerElement={ref.current}
            show={show}
            onClose={closeModal}
            closeButtonAriaLabel={"close"}
            width={Modal.width.DEFAULT}
          >
            <p className="modal-content">Normal modal</p>
            <ModalFooter>{modalButtons}</ModalFooter>
          </Modal>
        </div>
      );
    }}
  </Story>
  <Story name="Width variants - Full">
    {() => {
      const { openModalButton, modalButtons, show, closeModal, ref } = useModalHelper({
        openButtonTitle: "Full screen"
      });
      return (
        <div>
          {openModalButton}
          <Modal
            id={"story-book-modal"}
            title={"Modal title"}
            triggerElement={ref.current}
            show={show}
            onClose={closeModal}
            width={Modal.width.FULL_WIDTH}
            closeButtonAriaLabel={"close"}
          >
            <p className="modal-content">Full width modal</p>
            <ModalFooter>{modalButtons}</ModalFooter>
          </Modal>
        </div>
      );
    }}
  </Story>
</Canvas>

### Alert Modal (Modal)

Use this variant in case of sensitive or important messages, and in modals that requires data from the user, such as forms.
The Alert modal will not be closed by clicking outside the modal or by the ESC key. It will be closed only by the close button and the footer buttons.

<Canvas>
  <Story name="Alert Modal">
    {() => {
      const { openModalButton, modalButtons, show, closeModal, ref } = useModalHelper();
      return (
        <div>
          {openModalButton}
          <Modal
            id={"story-book-modal"}
            title={"Modal title"}
            triggerElement={ref.current}
            show={show}
            onClose={closeModal}
            alertDialog
            closeButtonAriaLabel={"close"}
          >
            <p className="modal-content">Use the close button to dismiss this Modal.</p>
            <ModalFooter>{modalButtons}</ModalFooter>
          </Modal>
        </div>
      );
    }}
  </Story>
</Canvas>

## Use cases and examples

### Showing the Modal

Use this variant in case of sensitive or importent masseges, and in modals that requires data from the user, such as forms.

The Alert modal will not be closed by clicking outside the modal or by the ESC key. It will be closed only by the close button and the footer buttons.

<Canvas>
  <Story name="Showing the Modal">
    {() => {
      const { modalButtons } = useModalHelper();
      const [show, setShow] = useState(false);
      const closeModal = () => {
        setShow(false);
      };
      return (
        <div>
          <Button onClick={() => setShow(true)}>Show</Button>
          <Modal
            id={"story-book-modal"}
            title={"Modal title"}
            show={show}
            onClose={closeModal}
            closeButtonAriaLabel={"close"}
          >
            <ModalContent>
              <span className="modal-content">Modal content goes here</span>
            </ModalContent>
            <ModalFooter>{modalButtons}</ModalFooter>
          </Modal>
        </div>
      );
    }}
  </Story>
</Canvas>

### Modal with footer buttons

As there are many possible combinations of buttons to display on the modal footer, we don't provide a build in support for footer buttons. However, you can use the ModalFooter component to place any content at the bottom of the modal, including buttons.

<Canvas>
  <Story name="Modal with footer buttons">
    {() => {
      const { openModalButton, show, closeModal, ref } = useModalHelper({
        openButtonTitle: "Modal with buttons"
      });
      return (
        <div>
          {openModalButton}
          <Modal
            id={"story-book-modal"}
            title={"Modal title"}
            triggerElement={ref.current}
            show={show}
            onClose={closeModal}
            closeButtonAriaLabel={"close"}
          >
            <div className="modal-content">Modal content goes here</div>
            <ModalFooter className="l3-storybook-modal-new-buttons">
              <Button kind={Button.kinds.SECONDARY} onClick={closeModal}>
                Dismiss
              </Button>
              <Button onClick={closeModal}>Close</Button>
            </ModalFooter>
          </Modal>
        </div>
      );
    }}
  </Story>
</Canvas>

### Modal header with an icon

Use the ModalHeader component to display a Header with an icon

<Canvas>
  <Story name="Modal with icon">
    {() => {
      const { openModalButton, modalButtons, show, closeModal, ref } = useModalHelper({
        openButtonTitle: "Header with icon"
      });
      return (
        <div>
          {openModalButton}
          <Modal
            id={"story-book-modal"}
            title={"Modal title"}
            triggerElement={ref.current}
            show={show}
            onClose={closeModal}
            closeButtonAriaLabel={"close"}
          >
            <ModalHeader title={"Modal Title"} icon={Settings} />
            <ModalFooter>{modalButtons}</ModalFooter>
          </Modal>
        </div>
      );
    }}
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: <div></div>,
        description: "Allow the user to easly close the modal by CTA and a close button.."
      },
      negative: {
        component: <div></div>,
        description: "Don’t align the footer buttons to the left."
      }
    }
  ]}
/>

## Related components

<RelatedComponents componentsNames={[TOOLTIP, ATTENTION_BOX, TOAST]} />
