import React from 'react';
import { AmountProduct } from '../components';
import { mockTheme } from '../defaultTheme';

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

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


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

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

  inputValue: 1,
}


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

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

  inputValue: 1,
}

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

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

  inputValue: 1,
}