import { useState } from "react";
import { Story, Canvas, Meta } from "@storybook/addon-docs";
import usePrevious from "../index";
import { Button, Counter, Flex } from "../../../components";
import { FunctionArgument, FunctionArguments } from "../../../storybook";
import styles from "./usePrevious.stories.module.scss";

<Meta title="Hooks/usePrevious" />

# usePrevious

- [Overview](#overview)
- [Arguments](#arguments)
- [Returns](#returns)
- [Feedback](#feedback)

## Overview

Hook for keeping previous state value.

<Canvas>
  <Story name="Overview">
    {() => {
      const [count, setCount] = useState(1);
      const prevCount = usePrevious(count);
      const incrementButtonOnClick = () => {
        setCount(prevValue => prevValue + 1);
      };
      return (
        <Flex direction={Flex.directions.COLUMN}>
          <Flex className={styles.counterContainer} direction={Flex.directions.COLUMN}>
            <div className={styles.counterLabel}>Current</div>
            <Counter count={count} />
          </Flex>
          <Flex className={styles.counterContainer} direction={Flex.directions.COLUMN}>
            <div className={styles.counterLabel}>Previous</div>
            <Counter count={prevCount} />
          </Flex>
          <Button onClick={incrementButtonOnClick}>Increment</Button>
        </Flex>
      );
    }}
  </Story>
</Canvas>

## Arguments

<FunctionArguments>
  <FunctionArgument name="value" type="any" description={<>State value to keep track of.</>} required />
</FunctionArguments>

## Returns

<FunctionArguments>
  <FunctionArgument name="value" type="any" description={<>Previous value of the argument.</>} />
</FunctionArguments>
