import { Story, Meta } from "@storybook/react";

import { CollapseProps } from "./Collapse";
import Block from "../../atoms/Block";
import Button from "../../atoms/Button";
import Collapse from "./Collapse";

export default {
  title: "Component/Elements/Collapse",
  component: Collapse,
  parameters: {
    component: Collapse,
    previewTabs: {
      canvas: {
        hidden: true,
      },
    },
    viewMode: "docs",
  },
} as Meta;

interface ExampleProps {
  children?: React.ReactNode;
  classes: string;
}

const Template: Story<CollapseProps> = (args) => (
  <Collapse {...args}></Collapse>
);

const Example: Story<ExampleProps> = (args) => {
  const classes = args.classes;
  return classes ? (
    <Block className={args.classes}>{args.children}</Block>
  ) : (
    <>{args.children}</>
  );
};

export const Properties = Template.bind({});
Properties.args = { text: "Hello" };

export const MaxWidth = Example.bind({});
MaxWidth.args = {
  children: (
    <>
      <Collapse
        text="First"
        variation="primary"
        className="w-full max-w-xs text-left"
      >
        <Block className="flex flex-col">
          <Button variation="default">Menu item</Button>
          <Button variation="default">Menu item</Button>
          <Button variation="default">Menu item</Button>
          <Button variation="default">Menu item</Button>
          <Button variation="default">Menu item</Button>
          <Button variation="default">Menu item</Button>
        </Block>
      </Collapse>
      <Collapse
        text="Second"
        variation="secondary"
        className="w-full max-w-xs text-left"
      >
        <Block className="flex flex-col">
          <Button variation="default">Menu item</Button>
          <Button variation="default">Menu item</Button>
          <Button variation="default">Menu item</Button>
          <Button variation="default">Menu item</Button>
          <Button variation="default">Menu item</Button>
          <Button variation="default">Menu item</Button>
        </Block>
      </Collapse>
    </>
  ),
  classes: "w-full h-[320px] max-w-xs",
};
