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} />;

let productOutStock = { ...mockPropsProduct }
productOutStock.remains = 0

// 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 ProductItemOutStockActive = Template.bind({});
ProductItemOutStockActive.args = {
  theme: mockTheme,
  data: productOutStock,
  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 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 ProductItemOneSKUOutStock = Template.bind({});
ProductItemOneSKUOutStock.args = {
  theme: mockTheme,
  data: productOutStock,
  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,
}

export const ProductItemNoSku = Template.bind({});
ProductItemNoSku.args = {
  theme: mockTheme,
  data: {...mockPropsProduct, name: 'ผงขัดผิวสมุนไพรเวชพงศ์', sku: 'ผงขัดผิวสมุนไพรเวชพงศ์'},  // name == sku
  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,
}