import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import TextField from "../TextField";
import { TextFieldTextType } from "../TextFieldConstants";
import {
  ComponentRules,
  createComponentTemplate,
  createStoryMetaSettings,
  RelatedComponents,
  UsageGuidelines
} from "../../../storybook";
import { Check, CloseSmall, Email } from "../../Icon/Icons";
import { COMBOBOX, DROPDOWN, SEARCH } from "../../../storybook/components/related-components/component-description-map";
import "./TextField.stories.scss";

export const metaSettings = createStoryMetaSettings({
  component: TextField,
  enumPropNamesArray: ["type", "size"],
  iconPropNamesArray: ["secondaryIconName", "iconName", "labelIconName"]
});

<Meta
  title="Inputs/TextField"
  component={TextField}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component template -->

export const textFieldTemplate = createComponentTemplate(TextField);

<!--- Component documentation -->

# TextField

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

An input field includes a label and a text field users can type text into. They typically appear in forms and dialogs.

<Canvas>
  <Story
    name="Overview"
    args={{
      title: "Name",
      iconName: "fa fa-square",
      validation: { text: "Helper text" },
      wrapperClassName: "l3-storybook-text-field_size",
      showCharCount: true,
      placeholder: "Placeholder text here"
    }}
  >
    {textFieldTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Always use placeholer in input field",
    "Icons can be used to message alerts as well. Pair them with error messages to provide redundant alerts.",
    "Character or word counters should be used if there is a character or word limit."
  ]}
/>

## Variants

### Sizes

There are three sizes available: Small (32px), Medium (40px) and Large (48px).

<Canvas>
  <Story name="Sizes">
    <div className="l3-storybook-text-field_column-wrapper">
      <TextField placeholder="Small" />
      <TextField placeholder="Meduim" size={TextField.sizes.MEDIUM} />
      <TextField placeholder="Large" size={TextField.sizes.LARGE} />
    </div>
  </Story>
</Canvas>

### States

<Canvas>
  <Story name="States">
    <div className="l3-storybook-text-field_wrapper">
      <div className="l3-storybook-text-field_column-wrapper l3-storybook-text-field_spacing">
        <TextField placeholder="Disabled" size={TextField.sizes.MEDIUM} disabled />
        <TextField placeholder="With icon" iconName={Email} size={TextField.sizes.MEDIUM} />
      </div>
      <div className="l3-storybook-text-field_column-wrapper">
        <TextField placeholder="With field label" title="Name" size={TextField.sizes.MEDIUM} />
        <TextField
          placeholder="Success"
          validation={{ status: "success" }}
          iconName={Check}
          size={TextField.sizes.MEDIUM}
        />
        <TextField
          placeholder="Error"
          validation={{ status: "error" }}
          iconName={CloseSmall}
          size={TextField.sizes.MEDIUM}
        />
      </div>
    </div>
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <div className="l3-storybook-text-field_size">
            <TextField title="Email" placeholder="email@l3vels.xyz" size={TextField.sizes.MEDIUM} />
          </div>
        ),
        description:
          "Make sure your text field has a short, descriptive label above it that describes what the user should type into the box below."
      },
      negative: {
        component: (
          <div className="l3-storybook-text-field_size">
            <TextField
              title="What is your email address?"
              placeholder="email@l3vels.xyz"
              size={TextField.sizes.MEDIUM}
            />
          </div>
        ),
        description:
          "Avoid phrasing your labels as questions. Keep in mind that your label shouldn’t contain instructions. Reserve those for the helper text."
      }
    },
    {
      positive: {
        component: (
          <div className="l3-storybook-text-field_size">
            <TextField title="Email" placeholder="email@l3vels.xyz" size={TextField.sizes.MEDIUM} />
          </div>
        ),
        description:
          "Use the help text description to convey requirements or to show any formatting examples that would help user comprehension."
      },
      negative: {
        component: (
          <div className="l3-storybook-text-field_size">
            <TextField title="Email" placeholder="email@l3vels.xyz" size={TextField.sizes.MEDIUM} />
            For example: email@l3vels.xyz
          </div>
        ),
        description:
          "Avoid repeating the field label. If the field label provides sufficient context for completing the action, then you likely don’t need to add help text."
      }
    }
  ]}
/>

## Use cases and examples

### Text field in a form

Users can insert text.

<Canvas>
  <Story name="Text field in a form">
    <div className="l3-storybook-text-field_box">
      <h1>Dark Mode Feedback From</h1>
      <div className="l3-storybook-text-field_box_wrapper">
        <TextField title="Your Name" size={TextField.sizes.MEDIUM} placeholder="John Doe" />
        <TextField title="Email" size={TextField.sizes.MEDIUM} placeholder="email@l3vels.xyz" />
      </div>
    </div>
  </Story>
</Canvas>

### Input field with placeholder text

<Canvas>
  <Story name="Input field with placeholder text">
    <div className="l3-storybook-text-field_size">
      <TextField
        title="Invite with email"
        labelIconName={Email}
        placeholder="Enter one or more email"
        size={TextField.sizes.MEDIUM}
      />
    </div>
  </Story>
</Canvas>

### Input field with date

<Canvas>
  <Story name="Input field with date">
    <div className="l3-storybook-text-field_size">
      <TextField size={TextField.sizes.MEDIUM} type={TextFieldTextType.DATE} />
    </div>
  </Story>
</Canvas>

### Input field with datetime

<Canvas>
  <Story name="Input field with date and time">
    <div className="l3-storybook-text-field_size">
      <TextField size={TextField.sizes.MEDIUM} type={TextFieldTextType.DATE_TIME} />
    </div>
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[DROPDOWN, SEARCH, COMBOBOX]} />
