import Skeleton from "../Skeleton";
import { useCallback, useState } from "react";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import {
  COUNTER,
  PROGRESS_BAR,
  SPINNER
} from "../../../storybook/components/related-components/component-description-map";
import Avatar from "../../Avatar/Avatar";
import person from "./assets/person.png";
import Button from "../../Button/Button";
import { Replay, ThumbsUp } from "../../Icon/Icons";
import { Link } from "../../../storybook/components";
import "./skeleton.stories.scss";

<Meta title="Feedback/Skeleton - (Coming Soon)" component={Skeleton} />

<!--- Component template -->

export const skeletonTemplate = args => {
  return (
    <div className="l3-style-stories-skeleton_rules-column">
      <div className="l3-style-stories-skeleton_rules-row">
        <Skeleton type={args.typeCircle} />
        <Skeleton type={args.typeText} width={110} size={args.smallSize} />
      </div>
      <div className="l3-style-stories-skeleton_article">
        <div>
          <Skeleton />
        </div>
        <div className="l3-style-stories-skeleton_aside">
          <Skeleton type={args.typeText} size={args.sizeH1} />
          <Skeleton type={args.typeText} size={args.sizeH4} />
          <Skeleton type={args.typeText} size={args.sizeH4} />
          <Skeleton type={args.typeText} size={args.sizeH4} />
          <Skeleton type={args.typeText} size={args.sizeH4} width={82} />
        </div>
      </div>
    </div>
  );
};

<!--- Component documentation -->

# Skeleton

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

Skeleton loading componet used to indicate content and ui loading that will appear after its loaded. It helps to decrease perceived duration time

<Canvas>
  <Story
    name="Overview"
    args={{
      typeText: Skeleton.types.TEXT,
      typeCircle: Skeleton.types.CIRCLE,
      smallSize: Skeleton.sizes.TEXT.SMALL,
      sizeH4: Skeleton.sizes.TEXT.H4,
      sizeH1: Skeleton.sizes.TEXT.H1
    }}
  >
    {skeletonTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={Skeleton} />

## Usage

<UsageGuidelines
  guidelines={[
    "Mimic the user interface that is going to be loaded as much as possible",
    "Animation on the skeleton is a repeating color pulse should move from left to right to indicate the lading state"
  ]}
/>

<Tip>
  Using loader after the pages i fully loaded consider using the{" "}
  <Link href="/?path=/docs/feedback-loader--overview" size={Link.sizes.SMALL} withoutSpacing>
    loader component.
  </Link>
</Tip>

## Variants

### Shapes

Use shaes to mimic Avatars, images, buttons etc...

<Canvas>
  <Story name="Shapes">
    <div className="l3-style-stories-skeleton_row-box">
      <div className="l3-style-stories-skeleton_column-box">
        <Skeleton type={Skeleton.types.CIRCLE} />
        <>Circle</>
      </div>
      <div className="l3-style-stories-skeleton_column-box">
        <Skeleton />
        <>Square</>
      </div>
      <div className="l3-style-stories-skeleton_column-box">
        <Skeleton width={112} height={46} />
        <>Rectangle</>
      </div>
    </div>
  </Story>
</Canvas>

### Text

Presents a classic menu or equivalent picker

<Canvas>
  <Story name="Text">
    <div className="l3-style-stories-skeleton_row-box">
      <div className="l3-style-stories-skeleton_column-box">
        <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.H1} />
        <>H1</>
      </div>
      <div className="l3-style-stories-skeleton_column-box">
        <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.H2} />
        <>H2</>
      </div>
      <div className="l3-style-stories-skeleton_column-box">
        <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.SMALL} />
        <>Paragraph</>
      </div>
    </div>
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <div>
            <div className="l3-style-stories-skeleton_rules-row">
              <Skeleton type={Skeleton.types.CIRCLE} />
              <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.SMALL} />
            </div>
            <div className="l3-style-stories-skeleton_rules-row">
              <Skeleton type={Skeleton.types.CIRCLE} />
              <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.SMALL} />
            </div>
            <div className="l3-style-stories-skeleton_rules-row">
              <Skeleton type={Skeleton.types.CIRCLE} />
              <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.SMALL} />
            </div>
          </div>
        ),
        description: "Show only representation of ui."
      },
      negative: {
        component: (
          <div>
            <div className="l3-style-stories-skeleton_rules-row">
              <Skeleton type={Skeleton.types.CIRCLE} />
              <div>
                <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.SMALL} />
                Small text
              </div>
            </div>
            <div className="l3-style-stories-skeleton_rules-row">
              <Skeleton type={Skeleton.types.CIRCLE} />
              <div>
                <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.SMALL} />
                Small text
              </div>
            </div>
            <div className="l3-style-stories-skeleton_rules-row">
              <Skeleton type={Skeleton.types.CIRCLE} />
              <div>
                <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.SMALL} />
                Small text
              </div>
            </div>
          </div>
        ),
        description: "Show all the user interface exactly."
      }
    }
  ]}
/>

## Use cases and examples

### Update in the system

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

<Canvas>
  <Story name="Update in the system">
    {() => {
      const [showSkeleton, setShowSkeleton] = useState(false);
      const [showBlock, setSHowBlock] = useState(false);
      const [showReload, setshowReload] = useState(true);
      const onClickCallback = useCallback(() => {
        setshowReload(false);
        setSHowBlock(false);
        setShowSkeleton(true);
        setTimeout(() => {
          setShowSkeleton(false);
        }, 4000);
        setTimeout(() => {
          setSHowBlock(true);
        }, 4000);
      }, [setShowSkeleton, setSHowBlock]);
      return (
        <div className="l3-style-stories-skeleton_row">
          {showBlock && (
            <div className="l3-style-stories-skeleton_box">
              <div className="l3-style-stories-skeleton_main">
                <div className="l3-style-stories-skeleton_header">
                  <Avatar src={person} type={Avatar.types.IMG} />
                  <h5>Hadas Farhi</h5>
                </div>
                <p className="l3-style-stories-skeleton_text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                  dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                  aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                  officia deserunt mollit anim id est laborum.
                </p>
              </div>
              <div className="l3-style-stories-skeleton_btn-group">
                <Button className="l3-style-stories-skeleton_btn" leftIcon={ThumbsUp} kind={Button.kinds.SECONDARY}>
                  Like
                </Button>
                <Button className="l3-style-stories-skeleton_btn" leftIcon={Replay} kind={Button.kinds.SECONDARY}>
                  Reply
                </Button>
              </div>
            </div>
          )}
          {showSkeleton && (
            <div className="l3-style-stories-skeleton_box">
              <div className="l3-style-stories-skeleton_main">
                <div className="l3-style-stories-skeleton_header">
                  <Skeleton type={Skeleton.types.CIRCLE} width={50} height={50} />
                  <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.H5} width={110} />
                </div>
                <p className="l3-style-stories-skeleton_text-wrapper">
                  <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.SMALL} width={655} />
                  <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.SMALL} width={680} />
                  <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.SMALL} width={670} />
                  <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.SMALL} width={675} />
                  <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.SMALL} width={400} />
                </p>
              </div>
              <div className="l3-style-stories-skeleton_btn-group-skeleton">
                <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.h2} width={60} />
                <Skeleton type={Skeleton.types.TEXT} size={Skeleton.sizes.TEXT.h2} width={60} />
              </div>
            </div>
          )}
          <Button kind={Button.kinds.SECONDARY} onClick={onClickCallback}>
            {showReload ? "Load update" : "Reload update"}
          </Button>
        </div>
      );
    }}
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[PROGRESS_BAR, COUNTER, SPINNER]} />
