import type { Meta, StoryObj } from '@storybook/react';
import SwiperElementComponent from './SwiperElement';

const meta: Meta<typeof SwiperElementComponent> = {
  title: 'Shared/SwiperElement',
  component: SwiperElementComponent,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen'
  },
  argTypes: {
    pagination: {
      control: { type: 'boolean' }
    },
    'pagination.position': {
      name: 'position',
      options: ['bottom', 'overlap'],
      control: { type: 'inline-radio' },
      table: { category: 'Pagination' },
      if: { arg: 'pagination' }
    },
    'pagination.variant': {
      name: 'variant',
      options: ['primary', 'secondary', 'light', 'dark'],
      control: { type: 'inline-radio' },
      table: { category: 'Pagination' },
      if: { arg: 'pagination' }
    },
    'pagination.align': {
      name: 'align',
      options: ['start', 'center', 'end'],
      control: { type: 'inline-radio' },
      table: { category: 'Pagination' },
      if: { arg: 'pagination' }
    },
    'pagination.type': {
      name: 'type',
      options: ['bullets', 'fraction'],
      control: { type: 'inline-radio' },
      table: { category: 'Pagination' },
      if: { arg: 'pagination' }
    },
    'pagination.bullet': {
      name: 'bullet',
      options: ['small', 'large'],
      control: { type: 'inline-radio' },
      table: { category: 'Pagination' },
      if: { arg: 'pagination' }
    },
    navigation: {
      control: { type: 'boolean' }
    },
    'navigation.variant': {
      name: 'variant',
      options: ['primary', 'secondary', 'light', 'dark'],
      control: { type: 'inline-radio' },
      table: { category: 'Navigation' },
      if: { arg: 'navigation' }
    }
  } as any
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Swiper: Story = {
  args: {
    dir: 'ltr',
    pagination: true,
    navigation: true,
    'pagination.position': 'bottom',
    'pagination.variant': 'primary',
    'pagination.align': 'center',
    'pagination.type': 'bullets',
    'pagination.bullet': 'small',
    'navigation.variant': 'primary'
  } as any,
  render: (args: any) => (
    <SwiperElementComponent
      key={args.pagination + args.navigation}
      className="h-64"
      {...args}
      options={{
        slidesPerView: 3,
        spaceBetween: 10,
        pagination: args.pagination && {
          variant: args['pagination.variant'],
          position: args['pagination.position'],
          align: args['pagination.align'],
          bullet: args['pagination.bullet'],
          type: args['pagination.type']
        },
        navigation: args.navigation && {
          variant: args['navigation.variant'],
          icon: args['navigation.icon']
        }
      }}>
      {['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'].map(
        (slide, index) => (
          <SwiperElementComponent.Slide
            key={index}
            className="bg-gray-400 text-black !flex justify-center items-center">
            {slide}
          </SwiperElementComponent.Slide>
        )
      )}
    </SwiperElementComponent>
  )
};

export const Scrollbar: Story = {
  args: {
    dir: 'ltr'
  } as any,
  render: (args: any) => (
    <SwiperElementComponent
      key={args.pagination + args.navigation}
      className="h-64"
      {...args}
      options={{
        slidesPerView: 3,
        spaceBetween: 10,
        scrollbar: {
          el: '.swiper-scrollbar',
          draggable: true,
          hide: false
        }
      }}>
      {['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'].map(
        (slide, index) => (
          <SwiperElementComponent.Slide
            key={index}
            className="bg-gray-400 text-black !flex justify-center items-center">
            {slide}
          </SwiperElementComponent.Slide>
        )
      )}
    </SwiperElementComponent>
  )
};
