import React from 'react';
import { useEffect, useState } from "react";
import { ComponentStory } from "@storybook/react";
import { StoryLayout } from "../../../.storybook/StoryComponents";
import { Arrange } from "./Arrange";
import { ArrangeDocs } from "./ArrangeDocs";
import { ItemType } from "./types";

export default {
  title: "Molecules/Arrange",
  component: Arrange,
  args: {
    disabled: false,
    vertical: false,
  },
  parameters: {
    docs: {
      page: ArrangeDocs,
    },
  },
};

const options = [
  { label: "First", value: "1" },
  { label: "Second", value: "2" },
];

export const Basic: ComponentStory<typeof Arrange> = ({ ...rest }) => {
  const items: ItemType[] = [
    {
      id: 1,
      title: "Title 1",
      value: 1,
    },
    {
      id: 2,
      title: "Title 2",
      value: 2,
    },
    {
      id: 3,
      title: "Title 3",
      value: 3,
    },
    {
      id: 4,
      title: "Title 4",
      value: 4,
    },
    {
      id: 5,
      title: "Title 5",
      value: 5,
    },
  ];

  const [itemList, getItemList] = useState<Array<ItemType>>(items);

  useEffect(() => {
    console.log(itemList);
  }, [JSON.stringify(itemList)]);

  return (
    <StoryLayout>
      <Arrange items={itemList} getItemList={getItemList} />
    </StoryLayout>
  );
};

Basic.parameters = {
  docs: {
    storyDescription: "Базовый пример использования компонента",
  },
};