import React from 'react'
import { Meta } from '@storybook/react/types-6-0'
import { Story } from '@storybook/react'
import { SliderProps,Slider } from './Slider'
import styled from 'styled-components'

export default {
  title:'Components/Slider',
  component: Slider,
  argTypes: {}
} as Meta

const list = [
  'Pisa Deals',
  'Meat Pizzas',
  'Vegetarian Pizza',
  'Salad',
  'Sides',
  'Desserts',
  'Drinks',
]

const Template: Story<SliderProps> = (args) => {
  const scrollRefs = list.map(() => React.createRef() as React.MutableRefObject<HTMLLIElement>) 

  return (
    <div style={{ maxWidth:'300px' }}>
      <Slider {...args} scrollRefs={scrollRefs}  />
      <div style={{ marginTop:'50px' }}>
        <ContentContainer>
          {list.map((item, i) => (
            <ContentItem key={i} id={`s-${i}`} ref={scrollRefs[i]}>
              <h3>{item}</h3>
              <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi,
              dicta.
              </p>
            </ContentItem>
          ))}
        </ContentContainer>
      </div> 
    </div>
  )
}

export const Basic = Template.bind({})
Basic.args = { list:list }

const ContentContainer = styled.ul`
  margin-bottom: 200px;
  padding-left: 0;
  list-style: none;
  background-color: white;
`

const ContentItem = styled.li`
  padding-top: 30vh;
  padding-bottom: 30vh;
  border: 1px solid;
`