import { mockPropsProduct } from '../../__MOCK__/mockPropsProduct';
import React from 'react';
import ProductItem from '../components/ProductItem';
import { mockTheme } from '../defaultTheme';

export default {
  title: 'page-ui/ProductItem',
  component: ProductItem,
  parameters: {
    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
    layout: 'centered',
  },
};

const Template = (args) => <ProductItem  {...args} />;


export const ProductItemUnActive = Template.bind({});
ProductItemUnActive.args = {
  theme: mockTheme,
  data: mockPropsProduct,
  marginBottom: 0,

  isActiveProduct: false,
  isProductOneSKU: false,
  handleAddToCart: ((event, data) => {
    console.log('event', event)
    console.log('data', data)
  }),

  isCanIncrement: true,
  isCanDecrement: true,
  handleBtnIncrement: (({ quantityProduct }) => { console.log(`handleBtnIncrement => inputValue=${quantityProduct}`) }),
  handleBtnDecrement: (({ quantityProduct }) => { console.log(`handleBtnDecrement => inputValue=${quantityProduct}`) }),
  inputValue: 1,
}

export const ProductItemActive = Template.bind({});
ProductItemActive.args = {
  theme: mockTheme,
  data: mockPropsProduct,
  marginBottom: 0,

  isActiveProduct: true,
  isProductOneSKU: false,
  handleAddToCart: ((event, data) => {
    console.log('event', event)
    console.log('data', data)
  }),

  isCanIncrement: true,
  isCanDecrement: true,
  handleBtnIncrement: (({ quantityProduct }) => { console.log(`handleBtnIncrement => inputValue=${quantityProduct}`) }),
  handleBtnDecrement: (({ quantityProduct }) => { console.log(`handleBtnDecrement => inputValue=${quantityProduct}`) }),
  inputValue: 1,
}

export const ProductItemActiveCanNotIncrement = Template.bind({});
ProductItemActiveCanNotIncrement.args = {
  theme: mockTheme,
  data: mockPropsProduct,
  marginBottom: 0,

  isActiveProduct: true,
  isProductOneSKU: false,
  handleAddToCart: ((event, data) => {
    console.log('event', event)
    console.log('data', data)
  }),

  isCanIncrement: false,
  isCanDecrement: true,
  handleBtnIncrement: (({ quantityProduct }) => { console.log(`handleBtnIncrement => inputValue=${quantityProduct}`) }),
  handleBtnDecrement: (({ quantityProduct }) => { console.log(`handleBtnDecrement => inputValue=${quantityProduct}`) }),
  inputValue: 1,
}

export const ProductItemActiveCanNotDecrement = Template.bind({});
ProductItemActiveCanNotDecrement.args = {
  theme: mockTheme,
  data: mockPropsProduct,
  marginBottom: 0,

  isActiveProduct: true,
  isProductOneSKU: false,
  handleAddToCart: ((event, data) => {
    console.log('event', event)
    console.log('data', data)
  }),

  isCanIncrement: true,
  isCanDecrement: false,
  handleBtnIncrement: (({ quantityProduct }) => { console.log(`handleBtnIncrement => inputValue=${quantityProduct}`) }),
  handleBtnDecrement: (({ quantityProduct }) => { console.log(`handleBtnDecrement => inputValue=${quantityProduct}`) }),
  inputValue: 1,
}

export const ProductItemOneSKU = Template.bind({});
ProductItemOneSKU.args = {
  theme: mockTheme,
  data: mockPropsProduct,
  marginBottom: 0,

  isActiveProduct: true,
  isProductOneSKU: true,
  handleAddToCart: ((event, data) => {
    console.log('event', event)
    console.log('data', data)
  }),

  isCanIncrement: true,
  isCanDecrement: true,
  handleBtnIncrement: (({ quantityProduct }) => { console.log(`handleBtnIncrement => inputValue=${quantityProduct}`) }),
  handleBtnDecrement: (({ quantityProduct }) => { console.log(`handleBtnDecrement => inputValue=${quantityProduct}`) }),
  inputValue: 1,
}

export const ProductItemOneSKUCanNotIncrement = Template.bind({});
ProductItemOneSKUCanNotIncrement.args = {
  theme: mockTheme,
  data: mockPropsProduct,
  marginBottom: 0,

  isActiveProduct: true,
  isProductOneSKU: true,
  handleAddToCart: ((event, data) => {
    console.log('event', event)
    console.log('data', data)
  }),

  isCanIncrement: false,
  isCanDecrement: true,
  handleBtnIncrement: (({ quantityProduct }) => { console.log(`handleBtnIncrement => inputValue=${quantityProduct}`) }),
  handleBtnDecrement: (({ quantityProduct }) => { console.log(`handleBtnDecrement => inputValue=${quantityProduct}`) }),
  inputValue: 1,
}

export const ProductItemOneSKUCanNotDecrement = Template.bind({});
ProductItemOneSKUCanNotDecrement.args = {
  theme: mockTheme,
  data: mockPropsProduct,
  marginBottom: 0,

  isActiveProduct: true,
  isProductOneSKU: true,
  handleAddToCart: ((event, data) => {
    console.log('event', event)
    console.log('data', data)
  }),

  isCanIncrement: true,
  isCanDecrement: false,
  handleBtnIncrement: (({ quantityProduct }) => { console.log(`handleBtnIncrement => inputValue=${quantityProduct}`) }),
  handleBtnDecrement: (({ quantityProduct }) => { console.log(`handleBtnDecrement => inputValue=${quantityProduct}`) }),
  inputValue: 1,
}

export const ProductItemSetImageChildren = Template.bind({});
ProductItemSetImageChildren.args = {
  theme: mockTheme,
  data: mockPropsProduct,
  imageChildren: (
    <img
      style={{ objectFit: 'cover' }}
      src={mockPropsProduct.image}
      alt={`cover-${mockPropsProduct.name}`}
      width={'100%'}
      height={'100%'}
    />
  ),
  marginBottom: 0,

  isActiveProduct: false,
  isProductOneSKU: false,
  handleAddToCart: ((event, data) => {
    console.log('event', event)
    console.log('data', data)
  }),

  isCanIncrement: true,
  isCanDecrement: true,
  handleBtnIncrement: (({ quantityProduct }) => { console.log(`handleBtnIncrement => inputValue=${quantityProduct}`) }),
  handleBtnDecrement: (({ quantityProduct }) => { console.log(`handleBtnDecrement => inputValue=${quantityProduct}`) }),
  inputValue: 1,
}
export const ProductItemOneSKUSetImageChildren = Template.bind({});
ProductItemOneSKUSetImageChildren.args = {
  theme: mockTheme,
  data: mockPropsProduct,
  imageChildren: (
    <img
      style={{ objectFit: 'cover' }}
      src={mockPropsProduct.image}
      alt={`cover-${mockPropsProduct.name}`}
      width={'100%'}
      height={'100%'}
    />
  ),
  marginBottom: 0,

  isActiveProduct: true,
  isProductOneSKU: true,
  handleAddToCart: ((event, data) => {
    console.log('event', event)
    console.log('data', data)
  }),

  isCanIncrement: true,
  isCanDecrement: true,
  handleBtnIncrement: (({ quantityProduct }) => { console.log(`handleBtnIncrement => inputValue=${quantityProduct}`) }),
  handleBtnDecrement: (({ quantityProduct }) => { console.log(`handleBtnDecrement => inputValue=${quantityProduct}`) }),
  inputValue: 1,
}