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

export default {
  title: 'page-ui/ProductItem',
  component: ProductItem,
};

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

export const ProductItemDefault = Template.bind({});
ProductItemDefault.args = {
}

export const ProductItemActiveWeb = Template.bind({});
ProductItemActiveWeb.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 ProductItemOneSKUWeb = Template.bind({});
ProductItemOneSKUWeb.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,
}