import React from "react";
import { Meta, Story } from "@storybook/react";
import { ISlideshowProps, OrganismSlideshow } from "react/organisms/Slideshow";
import { AtomSlideshowItemContainer } from "react/atoms/SlideshowItemContainer";
const meta: Meta = {
  title: "React/organisms/Slideshow",
  component: OrganismSlideshow,
  argTypes: {
    settings: { table: { disable: true } },
    itemMinWidthProp: { table: { disable: true } },
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const items = [
  {
    number: 1,
  },
  {
    number: 2,
    text: "hola",
  },
  {
    number: 3,
  },
  {
    number: 4,
  },
  {
    number: 5,
  },
];

const settings2 = {
  desktop: {
    autoplay: false,
    showDots: true,
    showArrows: true,
    itemsToShow: 3,
  },
  tablet: {
    autoplay: false,
    itemsToShow: 3,
    showDots: true,
    showArrows: true,
  },
  mobile: {
    autoplay: false,
    showDots: true,
    showArrows: true,
    itemsToShow: 3,
  },
};

const TemplateSlideshow: Story<ISlideshowProps> = (props) => (
  <>
    <OrganismSlideshow {...props}>
      {items.map((item, i) => (
        <AtomSlideshowItemContainer
          key={i}
          margin="0"
          minWidth={{ desktop: "100%", mobile: "100%", tablet: "100%" }}
          borderRadius="8px"
        >
          <p style={{ height: "150px", padding: "5%" }}>{item.number}</p>
        </AtomSlideshowItemContainer>
      ))}
    </OrganismSlideshow>

    <div style={{ margin: "0 auto", marginTop: "20px" }}>
      <OrganismSlideshow totalItems={items.length} settings={settings2}>
        {items.map((item, i) => (
          <AtomSlideshowItemContainer
            key={i}
            margin="0 1.2%"
            minWidth={{ desktop: "31%", mobile: "31%", tablet: "31%" }}
            borderRadius="8px"
          >
            <p style={{ height: "150px", padding: "5%" }}>{item.number}</p>
          </AtomSlideshowItemContainer>
        ))}
      </OrganismSlideshow>
    </div>
  </>
);

export const SlideshowNoAutoplay = TemplateSlideshow.bind({});

SlideshowNoAutoplay.args = {
  totalItems: items.length,
  settings: {
    desktop: {
      autoplay: false,
      showDots: true,
      showArrows: true,
      itemsToShow: 1,
    },
    tablet: {
      autoplay: false,
      itemsToShow: 1,
      showDots: true,
      showArrows: true,
    },
    mobile: {
      autoplay: false,
      showDots: true,
      showArrows: true,
      itemsToShow: 1,
    },
  },
};
