import Heading from "../Heading";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook";
import { Link, RelatedComponents } from "../../../storybook/components";
import Divider from "../../Divider/Divider";
import Search from "../../Search/Search";
import Checkbox from "../../Checkbox/Checkbox";
import Button from "../../Button/Button";
import { Custom } from "../../Icon/Icons";
import { emptyStateExample } from "./assets";
import {
  EDITABLE_HEADING,
  SEARCH,
  TEXT_FIELD
} from "../../../storybook/components/related-components/component-description-map";
import styles from "./Heading.stories.module.scss";

export const metaSettings = createStoryMetaSettings({
  component: Heading,
  enumPropNamesArray: ["type", "size"]
});

<Meta
  title="Text/Heading - (Coming Soon)"
  component={Heading}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component template -->

export const headingTemplate = createComponentTemplate(Heading);

<!--- Component documentation -->

# Heading

- [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

Heading components are used to title any page sections or sub-sections in top-level page sections.

<Canvas>
  <Story name="Overview" args={{ value: "Hello world" }}>
    {headingTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Never include more than one H1 title per web page.",
    "Heading always should be linked to content (by design and by implementation by passing the heading id to the content's aria-labelledBy attribute)."
  ]}
/>

<Tip title="Not what you were looking for?">
  Please check out our{" "}
  <Link href="/?path=/docs/inputs-editableheading--overview" withoutSpacing>
    EditableHeading
  </Link>{" "}
  component if you would like to allow users to edit the title text..
</Tip>

## Variants

### Sizes

<Canvas>
  <Story name="Sizes">
    <div style={{ display: "flex", flexDirection: "column" }}>
      <Heading type={Heading.types.h1} value="Hello H1" brandFont />
      <Heading type={Heading.types.h1} value="Hello H1 medium" size="medium" brandFont />
      <Heading type={Heading.types.h2} value="Hello H2" />
      <Heading type={Heading.types.h2} value="Hello H2 small" size="small" />
      <Heading type={Heading.types.h3} value="Hello H3" />
      <Heading type={Heading.types.h4} value="Suggest Edit H4" suggestEditOnHover />
      <Heading type={Heading.types.h5} value="H5 with tooltip" nonEllipsisTooltip="Click to edit" />
    </div>
  </Story>
</Canvas>

### Overflow

Our heading component support overflow state.
When the heading text is too long and the component includes an ellipsis flag, we will cut the end of the heading and display instead of it "...".

<Canvas>
  <Story name="Overflow">
    <div style={{ display: "flex", flexDirection: "column", width: "70%" }}>
      <Heading
        type={Heading.types.h2}
        value="Heading without overflow heading without overflow heading without overflow"
        ellipsis={false}
        nonEllipsisTooltip="Non ellipsis tooltip"
      />
      <Heading
        type={Heading.types.h2}
        value="Heading with overflow heading with overflow heading with overflow heading with overflow heading with overflow"
        ellipsis
        nonEllipsisTooltip="Non ellipsis tooltip (this tooltip is not shown since overflow)"
      />
      <div>
        <Heading
          type={Heading.types.h2}
          value="Heading with overflow when text is longer then 2 lines heading with overflow when text is longer then 2 lines heading with overflow when text is longer then 2 lines"
          ellipsisMaxLines={2}
          nonEllipsisTooltip="Non ellipsis tooltip (this tooltip is not shown since overflow)"
        />
      </div>
    </div>
  </Story>
</Canvas>

### With text highlight

Our heading component support text highlight.

<Canvas>
  <Story name="Text Highlight">
    <div style={{ display: "flex", flexDirection: "column", width: "70%" }}>
      <Heading
        type={Heading.types.h2}
        highlightTerm="heading highlight"
        value="Heading with highlight text heading with highlight text without overflow"
        ellipsis={false}
        nonEllipsisTooltip="Tooltip when no overflow"
      />
      <Heading
        type={Heading.types.h2}
        highlightTerm="heading highlight"
        value="Heading with highlight text heading with highlight text heading with highlight text heading with highlight text"
        nonEllipsisTooltip="Non ellipsis tooltip (this tooltip is not shown since overflow)"
      />
      <Heading
        type={Heading.types.h2}
        highlightTerm="heading highlight"
        value="Heading with highlight text when text is longer then 2 lines heading with overflow when text is longer then 2 lines heading with overflow when text is longer then 2 lines"
        ellipsisMaxLines={2}
      />
    </div>
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: <Heading value="Hello world" />,
        description: "Always capitalize the first letter of the first word in the heading."
      },
      negative: {
        component: <Heading value="Hello World" />,
        description: "Please avoid capitalizing the first letter of each word in the heading."
      }
    }
  ]}
/>

## Use cases and examples

### Not editable header of a page

<Canvas>
  <Story name="Not editable header of a page">
    <div style={{ width: "100%" }}>
      <Heading type={Heading.types.h1} value="My Work" id="my-work-id" />
      <Divider />
      <div
        className={styles["page-header_commands"]}
        style={{ display: "flex", alignItems: "center" }}
        aria-labelledby="my-work-id"
      >
        <Search wrapperClassName={styles["page-header_search"]} placeholder="Search" />
        <Checkbox label="Hide done items" checked />
        <Button leftIcon={Custom} kind={Button.kinds.TERTIARY}>
          Customize
        </Button>
      </div>
    </div>
  </Story>
</Canvas>

### Empty state title

<Canvas>
  <Story name="Empty state title">
    <div className={styles["empty-state-container"]} aria-labelledby="empty-state-id">
      <img style={{ width: "290px" }} src={emptyStateExample} alt="" />
      <Heading type={Heading.types.h2} id="empty-state-id" value="No updates yet for this item" />
      <span style={{ width: "50%", textAlign: "center" }}>
        Be the first one to update about progress, mention someone or upload files to share with your team members
      </span>
    </div>
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[EDITABLE_HEADING, TEXT_FIELD, SEARCH]} />
