import { useCallback, useMemo, useState } from "react";
import VirtualizedGrid from "../VirtualizedGrid";
import Button from "../../Button/Button";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { UsageGuidelines } from "../../../storybook";
import { generateItems, itemRenderer } from "./VirtualizedGrid.stories";

<Meta title="Navigation/VirtualizedGrid - (Coming Soon)" component={VirtualizedGrid} />

<!--- Component template -->

export const virtualizedGridTemplate = args => {
  const [scrollToId, setScrollToId] = useState(null);
  const [lastScrolledId, setLastScrolledId] = useState(null);
  const [scrollToDisabled, setScrollToDisabled] = useState(false);
  const [nextScrollToId, setNextScrollToId] = useState(args.itemsCount - 1);
  const getColumnWidth = useCallback(() => {
    return 100;
  }, []);
  const getRowHeight = useCallback(() => {
    return 50;
  }, []);
  const items = useMemo(() => {
    return generateItems(50, 100, args.itemsCount);
  }, []);
  const onClickToScroll = useCallback(() => {
    setScrollToId(nextScrollToId);
    setLastScrolledId("");
    setScrollToDisabled(true);
  }, [setScrollToId, setScrollToDisabled, items, nextScrollToId]);
  const onScrollToFinished = useCallback(() => {
    setLastScrolledId(nextScrollToId);
    setScrollToId(null);
    setNextScrollToId(Math.round(Math.random() * items.length));
    setScrollToDisabled(false);
  }, [nextScrollToId, items, setNextScrollToId, setLastScrolledId]);
  return (
    <div style={args.wrapperStyle}>
      <div style={{ width: "430px", height: "100%" }}>
        <VirtualizedGrid
          id={args.wrapperId}
          scrollToId={scrollToId}
          items={items}
          itemRenderer={itemRenderer}
          getColumnWidth={getColumnWidth}
          getRowHeight={getRowHeight}
          onScrollToFinished={onScrollToFinished}
        />
      </div>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
        <Button
          size={Button.sizes.MEDIUM}
          kind={Button.kinds.PRIMARY}
          onClick={onClickToScroll}
          disabled={scrollToDisabled}
        >
          {`Scroll to Item ${nextScrollToId}`}
        </Button>
        <div style={{ marginTop: 16, opacity: lastScrolledId ? 1 : 0 }}>{`Scrolled to Item ${lastScrolledId}`}</div>
      </div>
    </div>
  );
};

<!--- Component documentation -->

# VirtualizedGrid

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Feedback](#feedback)

## Overview

VirtualizedGrid is a component which only renders visible grid items, it is a logic component and doesn't change and look and feel

Under the hood we are using - [react-window](https://github.com/bvaughn/react-window) and [react-virtualized-auto-sizer](https://github.com/bvaughn/react-virtualized-auto-sizer)

<Canvas>
  <Story
    name="Overview"
    args={{
      wrapperStyle: {
        width: 430,
        height: 300,
        overflow: "hidden",
        display: "flex",
        alignItems: "center"
      },
      itemsCount: 100
    }}
  >
    {virtualizedGridTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Use this component to implement a grid with many items or when each item render has heavy calculations.",
    "Rendering only the visible grid items instead of all the grid's items will create better performance and a smoother experience for users while using the grid."
  ]}
/>
