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 - (In Progress)"
  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-dots)
- [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={"Heading"}
            description={"Heading"}
            triggerElement={ref.current}
            show={show}
            onClose={closeModal}
            hideCloseButton
            modalHeight
            modalWidth
            closeButtonAriaLabel={"close"}
          >
            <ModalFooter className="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

### Fullscreen

<Canvas>
  <Story name="Fullscreen">
    {() => {
      const { openModalButton, modalButtons, show, closeModal, ref } = useModalHelper({
        openButtonTitle: "Fullscreen Modal"
      });
      return (
        <div>
          {openModalButton}
          <Modal
            fullscreen
            id={"story-book-modal"}
            title={"Heading"}
            description={"Heading"}
            triggerElement={ref.current}
            show={show}
            onClose={closeModal}
            hideCloseButton={false}
            backgroundColor="dark"
            className="modalClassName"
          >
            <ModalFooter className="modalFooter">{modalButtons}</ModalFooter>
          </Modal>
        </div>
      );
    }}
  </Story>
</Canvas>

### Themes

<Canvas>
  <Story name="Background variants - Dark">
    {() => {
      const { openModalButton, modalButtons, show, closeModal, ref } = useModalHelper({
        openButtonTitle: "dark background"
      });
      return (
        <div>
          {openModalButton}
          <Modal
            id={"story-book-modal"}
            title={"Heading"}
            description={"Heading"}
            triggerElement={ref.current}
            show={show}
            onClose={closeModal}
            hideCloseButton={false}
            backgroundColor="dark"
            className="modalClassName"
          >
            <ModalFooter className="modalFooter">{modalButtons}</ModalFooter>
          </Modal>
        </div>
      );
    }}
  </Story>
  <Story name="Background variants - Light">
    {() => {
      const { openModalButton, modalButtons, show, closeModal, ref } = useModalHelper({
        openButtonTitle: "Light background"
      });
      return (
        <div>
          {openModalButton}
          <Modal
            title={"Heading"}
            description={"heading"}
            triggerElement={ref.current}
            show={show}
            hideCloseButton={false}
            onClose={closeModal}
            backgroundColor="light"
            closeButtonAriaLabel={"close"}
            closeButtonAriaLabel={"close"}
            className="modalClassName"
          >
            <ModalFooter className="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]} />
