import React from "react";
import { Meta, Story } from "@storybook/react";
import { ISlideshowProps, OrganismSlideshow } from "native/organisms/Slideshow";
import { AtomSlideshowItemContainer } from "native/atoms/SlideshowItemContainer";
import { OrganismsCardButton } from "native/organisms/CardButton";
const meta: Meta = {
  title: "React Native/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 = {
  mobile: {
    autoplay: false,
    showDots: true,
    showArrows: true,
    itemsToShow: 4,
  },
};

const TemplateSlideshow: Story<ISlideshowProps> = (props) => (
  <>
    <OrganismSlideshow {...props}>
      {items.map((item, i) => (
        <AtomSlideshowItemContainer key={i} margin="1px" borderRadius="8px">
          <OrganismsCardButton
            handleClick={() => {
              alert("Card action");
            }}
            disabled={false}
            title="Double the Points on Bud Light Seltzer Hard Soda"
            description="Scan 2 six packs to unlock a Cooler+ ans earn 200 points"
            category="Bud Light"
            textButton="Activate Offer"
            src="https://www.ngenespanol.com/wp-content/uploads/2018/08/7-buenas-razones-para-tomar-cerveza-1280x720.png"
            tagText={`Great Offer ${item.number}`}
            heightCard="307px"
            widthCard="100%"
          />
        </AtomSlideshowItemContainer>
      ))}
    </OrganismSlideshow>

    <div style={{ margin: "0px", marginTop: "20px" }}>
      <OrganismSlideshow
        totalItems={items.length}
        settings={settings2}
        itemWidth={"255px"}
        itemsMargin={"1px"}
        arrowColor="primary"
      >
        {items.map((item, i) => (
          <AtomSlideshowItemContainer
            key={i}
            margin={"1px"}
            minWidth={{
              desktop: "255px",
              mobile: "255px",
              tablet: "255px",
            }}
          >
            <OrganismsCardButton
              handleClick={() => {
                alert("Card action");
              }}
              disabled={false}
              title="Double the Points on Bud Light Seltzer Hard Soda"
              description="Scan 2 six packs to unlock a Cooler+ ans earn 200 points"
              category="Bud Light"
              textButton="Activate Offer"
              src="https://www.ngenespanol.com/wp-content/uploads/2018/08/7-buenas-razones-para-tomar-cerveza-1280x720.png"
              tagText={`Great Offer ${item.number}`}
              heightCard={"307px"}
              widthCard={"255px"}
            />
          </AtomSlideshowItemContainer>
        ))}
      </OrganismSlideshow>
    </div>
  </>
);

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

SlideshowNoAutoplay.args = {
  totalItems: items.length,
  arrowColor: "primary",
  itemsMargin: "1%",
  settings: {
    mobile: {
      autoplay: false,
      showDots: true,
      showArrows: true,
      itemsToShow: 4,
    },
  },
};
