import React from 'react'
import { storiesOf } from '@storybook/react'
import { ProductOptions } from 'molecules/ProductOptions'
import { productOptionsData as data } from './fixture'

const handleOnClick = () => {
  console.log('Product Options Story: handleOnClick')
}

storiesOf('molecules/ProductOptions', module)
  .add('PDP View', () => (
    <React.Fragment>
      <ProductOptions
        list={data.color}
        type={'color'}
        onChange={handleOnClick}
      />
      <ProductOptions
        list={data.size1}
        type={'size1'}
        onChange={handleOnClick}
      />
      <ProductOptions
        list={data.style}
        type={'style'}
        onChange={handleOnClick}
      />
    </React.Fragment>
  ))
  .add('PLP View', () => (
    <React.Fragment>
      <ProductOptions
        list={data.color}
        isDropdown={true}
        onChange={handleOnClick}
      />
      <ProductOptions
        list={data.size1}
        isDropdown={true}
        onChange={handleOnClick}
      />
      <ProductOptions
        list={data.style}
        isDropdown={true}
        onChange={handleOnClick}
      />
    </React.Fragment>
  ))