import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
import Link from "../Link.tsx";
import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook";
import { ExternalPage, Gallery } from "../../Icon/Icons";
import { BUTTON, TAG, BREADCRUBMS } from "../../../storybook/components/related-components/component-description-map";
import { Link as StorybookLink } from "../../../storybook";
import "./Link.stories.scss";

export const metaSettings = createStoryMetaSettings({
  component: Link,
  enumPropNamesArray: ["iconPosition", "target"],
  iconPropNamesArray: ["icon"]
});

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

<!--- Component template -->

export const linkTemplate = createComponentTemplate(Link);

<!--- Component documentation -->

# Link

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

Link is an actionable text component with connection to another web pages.

<Canvas>
  <Story name="Overview" args={{ text: "Read more", href: "https://www.l3vels.xyz" }}>
    {linkTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Use links only as part of the text or scentence.",
    "Use links in order to redirect people outside of the system.",
    "Links should be short with a clear action name. read more, go to, etc..."
  ]}
/>

<Tip>
  If you need an action that does not have context with text{" "}
  <StorybookLink href="/?path=/docs/inputs-combobox--overview" size={StorybookLink.sizes.SMALL} withoutSpacing>
    Button
  </StorybookLink>
  .
</Tip>

## Variants

### States

<Canvas>
  <Story name="States">
    <Link text="Default" href="https://www.l3vels.xyz" />
  </Story>
</Canvas>

### Right to left

<Canvas>
  <Story name="Right to left">
    <Link text="اقرأ أكثر" href="https://www.l3vels.xyz" icon="fa fa-link" />
    <Link text="קרא עוד" href="https://www.l3vels.xyz" iconPosition={Link.iconPositions.END} icon="fa fa-info" />
  </Story>
</Canvas>

### With icons

<Canvas>
  <Story name="With icons">
    <Link text="Read more" href="https://www.l3vels.xyz" icon={ExternalPage} />
    <Link text="Read more" href="https://www.l3vels.xyz" iconPosition={Link.iconPositions.END} icon={ExternalPage} />
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: <Link text="Read more" href="https://www.l3vels.xyz" />,
        description: "Keep the copy short and to the point."
      },
      negative: {
        component: <Link text="Go to this url and read all about it" href="https://www.l3vels.xyz" />,
        description: "Don’t write long messages that are clickable."
      }
    },
    {
      positive: {
        component: (
          <Link
            text="Read more"
            iconPosition={Link.iconPositions.START}
            href="https://www.l3vels.xyz"
            icon={ExternalPage}
          />
        ),
        description: "Use icon from the left or right side of the link"
      },
      negative: {
        component: [
          <Link icon={Gallery} iconPosition={Link.iconPositions.END} />,
          <Link icon={ExternalPage} text="Read more" iconPosition={Link.iconPositions.END} />
        ],
        description: "Don’t use two icons for one link."
      }
    },
    {
      positive: {
        component: <Link text="Read more" href="https://www.l3vels.xyz" />,
        description: "Use only one link in context in text"
      },
      negative: {
        component: [
          <Link text="Read this" href="https://www.l3vels.xyz" />,
          <span class="l3-storybook-link_text">or</span>,
          <Link text="this" href="https://www.l3vels.xyz" />,
          <Link text="Nice article" href="https://www.l3vels.xyz" />
        ],
        description: "Don’t use multiple links near each other"
      }
    }
  ]}
/>

## Use cases and examples

### Reference link

Use this menu to allow a user to either select one or more items from the list.

<Canvas>
  <Story name="Reference link">
    <div>
      Lorem Ipsum has been the industry's{" "}
      <Link inlineText inheritFontSize text="standard" href="https://www.l3vels.xyz" /> dummy text ever since the 1500s,
      when an unknown printer took a galley of type and scrambled it to make a type specimen book.{" "}
    </div>
  </Story>
</Canvas>

### Shortening texts

Use read more to shorten long paragraphs of text

<Canvas>
  <Story name="Shortening texts">
    <div>
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
      galley of type and scrambled it to make a type specimen book.
      <Link text=" Read more..." href="https://www.l3vels.xyz" inheritFontSize inlineText />
    </div>
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[BUTTON, BREADCRUBMS, TAG]} />
