import VirtualizedList from "../VirtualizedList";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { generateItems } from "./virtualizedList.components";
import { useCallback } from "react";
import { Flex } from "../../";
import styles from "./virtualizedList.module.scss";
import { Tip, UsageGuidelines } from "../../../storybook";

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

<!--- Component template -->

export const virtualizedListTemplate = args => {
  const itemRenderer = useCallback((item, index, style) => {
    const backgroundColor = index % 2 === 0 ? "#e1e1e1" : "#f8f8f0";
    return (
      <div key={index} style={style}>
        <div
          className={styles.virtualizedListItem}
          style={{
            backgroundColor,
            height: item.height
          }}
        >
          {item.value}
        </div>
      </div>
    );
  }, []);
  return (
    <Flex align={Flex.align.START} gap={Flex.gaps.LARGE} style={{ width: "100%" }} direction={Flex.directions.ROW}>
      <div
        style={{
          width: 330,
          height: 300,
          overflow: "hidden",
          display: "flex",
          alignItems: "center"
        }}
      >
        <div style={{ width: 200, height: "100%" }}>
          <h3>Vertical List</h3>
          <VirtualizedList
            {...args}
            items={generateItems(30, 1000, "vertical")}
            itemRenderer={itemRenderer}
            getItemSize={item => item.size}
          />
        </div>
      </div>
      <div
        style={{
          flexGrow: 1,
          height: 300,
          overflow: "hidden",
          display: "flex",
          alignItems: "center"
        }}
      >
        <div style={{ height: "100%", width: "100%" }}>
          <h3>Horizontal List</h3>
          <VirtualizedList
            {...args}
            items={generateItems(100, 1000, "horizontal")}
            itemRenderer={itemRenderer}
            getItemSize={item => item.size}
            layout="horizontal"
          />
        </div>
      </div>
    </Flex>
  );
};

<!--- Component documentation -->

# VirtualizedList

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

## Overview

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

The VirtualizedList can be Vertical or Horizontal

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">{virtualizedListTemplate.bind({})}</Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines guidelines={["Use this when you expect to have many items in your list"]} />

<Tip title="Are your list items not rendered correctly?">
  {" "}
  Please make sure you inject the style parameter of the itemRenderer function to the item element's wrapper style.
</Tip>
