import React from 'react';
import DropdownLayout from '../..';

export default {
  title: 'DropdownLayout',
  component: DropdownLayout,
};

export const InitialItemsNotScrollable = () => {
  const [data, setData] = React.useState(
    [] as { id: string; title: string; subtitle: string }[],
  );

  const pageRef = React.useRef(1);

  const limit = 2;

  const fetchMoreData = (page: number) => {
    pageRef.current = page;
    setTimeout(() => {
      const items = Array(500)
        .fill(0)
        .map((_, i) => ({
          id: String(i),
          title: `Title ${i}`,
          subtitle: `Subtitle ${i}`,
        }));

      const offset = (page - 1) * limit;
      setData([...data, ...items.slice(offset, offset + limit)]);
    }, 500);
  };

  React.useEffect(() => {
    fetchMoreData(pageRef.current);
  }, []);

  return (
    <DropdownLayout
      dataHook="dropdown-layout"
      infiniteScroll
      visible
      inContainer
      hasMore
      loadMore={page => {
        if (page === 1) {
          return;
        }
        fetchMoreData(pageRef.current + 1);
      }}
      options={data.map(({ id, title, subtitle }) => ({
        id,
        value: title,
      }))}
    />
  );
};