import React from 'react';
import { storiesOf } from '@storybook/react';
import { CarouselComponent, CarouselItem } from './index';
import styled from 'styled-components';

// Simple card component for demos
const SimpleCard = styled.div<{ color: string }>`
  background: ${props => props.color};
  height: 300px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
`;

const Container = styled.div`
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
`;

const Title = styled.h2`
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
`;

storiesOf('Typescript Component/CarouselComponent', module)
  .add('Two Cards Per Page', () => {
    const colors = [
      '#005C8A',
      '#FF6B6B',
      '#4ECDC4',
      '#45B7D1',
      '#96CEB4',
      '#FFEAA7'
    ];

    const items = colors.map((color, index) => (
      <CarouselItem
        key={index}
        widthItemConfig={{
          mobile: '90%',
          tablet: '70%',
          desktop: 'calc(47% - 10px)'
        }}
      >
        <SimpleCard color={color}>Card {index + 1}</SimpleCard>
      </CarouselItem>
    ));

    return (
      <Container>
        <Title>Two Cards Per Page (with peek)</Title>
        <CarouselComponent
          items={items}
          options={{
            itemsPerPage: 2
          }}
          showArrows={true}
          showDots={true}
        />
      </Container>
    );
  })
  .add('Three Cards Per Page', () => {
    const colors = [
      '#005C8A',
      '#FF6B6B',
      '#4ECDC4',
      '#45B7D1',
      '#96CEB4',
      '#FFEAA7',
      '#DFE6E9',
      '#74B9FF',
      '#A29BFE'
    ];

    const items = colors.map((color, index) => (
      <CarouselItem
        key={index}
        widthItemConfig={{
          mobile: '85%',
          tablet: '40%',
          desktop: 'calc(31% - 14px)'
        }}
      >
        <SimpleCard color={color}>Card {index + 1}</SimpleCard>
      </CarouselItem>
    ));

    return (
      <Container>
        <Title>Three Cards Per Page (with peek)</Title>
        <CarouselComponent
          items={items}
          options={{
            itemsPerPage: 3
          }}
          showArrows={true}
          showDots={true}
        />
      </Container>
    );
  })
  .add('Minimal Example', () => {
    const items = [
      <CarouselItem
        key="1"
        widthItemConfig={{
          mobile: '90%',
          tablet: '70%',
          desktop: 'calc(47% - 10px)'
        }}
      >
        <SimpleCard color="#005C8A">Card 1</SimpleCard>
      </CarouselItem>,
      <CarouselItem
        key="2"
        widthItemConfig={{
          mobile: '90%',
          tablet: '70%',
          desktop: 'calc(47% - 10px)'
        }}
      >
        <SimpleCard color="#FF6B6B">Card 2</SimpleCard>
      </CarouselItem>,
      <CarouselItem
        key="3"
        widthItemConfig={{
          mobile: '90%',
          tablet: '70%',
          desktop: 'calc(47% - 10px)'
        }}
      >
        <SimpleCard color="#4ECDC4">Card 3</SimpleCard>
      </CarouselItem>,
      <CarouselItem
        key="4"
        widthItemConfig={{
          mobile: '90%',
          tablet: '70%',
          desktop: 'calc(47% - 10px)'
        }}
      >
        <SimpleCard color="#45B7D1">Card 4</SimpleCard>
      </CarouselItem>
    ];

    return (
      <Container>
        <Title>Simple 4 Cards</Title>
        <CarouselComponent items={items} />
      </Container>
    );
  })
  .add('Without Navigation', () => {
    const colors = ['#005C8A', '#FF6B6B', '#4ECDC4', '#45B7D1'];

    const items = colors.map((color, index) => (
      <CarouselItem
        key={index}
        widthItemConfig={{
          mobile: '90%',
          tablet: '70%',
          desktop: 'calc(47% - 10px)'
        }}
      >
        <SimpleCard color={color}>Card {index + 1}</SimpleCard>
      </CarouselItem>
    ));

    return (
      <Container>
        <Title>Scroll Only (No Arrows/Dots)</Title>
        <CarouselComponent items={items} showArrows={false} showDots={false} />
      </Container>
    );
  })
  .add('Three Cards Exact Width (No Peek)', () => {
    const colors = [
      '#005C8A',
      '#FF6B6B',
      '#4ECDC4',
      '#45B7D1',
      '#96CEB4',
      '#FFEAA7'
    ];

    const items = colors.map((color, index) => (
      <CarouselItem
        key={index}
        widthItemConfig={{
          mobile: '90%',
          tablet: '70%',
          desktop: 'calc(33% - 10px)'
        }}
      >
        <SimpleCard color={color}>Card {index + 1}</SimpleCard>
      </CarouselItem>
    ));

    return (
      <Container>
        <Title>Three Cards Per Page (exact width, no peek)</Title>
        <CarouselComponent
          items={items}
          options={{
            itemsPerPage: 3
          }}
          showArrows={true}
          showDots={true}
        />
      </Container>
    );
  });