import React, { useState } from 'react';
import Checkbox from './index';
import taste from '../../../Presets/taste';
import { Provider } from '../../../DesignSystem';

export default {
  title: 'Core/Controls/Checkbox',
  component: Checkbox
};

const Template = args => {
  const [isChecked, setChecked] = useState(args.checked);

  const handleChange = () => {
    setChecked(!isChecked);
  };

  if (args.theme === 'taste') {
    return (
      <Provider theme={taste}>
        <Checkbox {...args} checked={isChecked} onChange={handleChange} />
      </Provider>
    );
  }

  return <Checkbox {...args} checked={isChecked} onChange={handleChange} />;
};

export const Default = Template.bind({});
Default.args = {
  theme: '',
  value: '',
  label: 'Checkbox',
  name: 'checkbox',
  size: 'medium',
  rounded: false,
  disabled: false
};

export const Taste = Template.bind({});
Taste.args = {
  theme: 'taste',
  value: '',
  label: 'Checkbox',
  name: 'checkbox',
  size: 'medium',
  rounded: false,
  disabled: false
};

export const Checked = Template.bind({});
Checked.args = {
  theme: '',
  value: '',
  label: 'Checkbox',
  name: 'checkbox',
  size: 'medium',
  rounded: false,
  disabled: false,
  checked: true
};

export const Indeterminate = Template.bind({});
Indeterminate.args = {
  theme: '',
  indeterminate: true,
  value: '',
  label: 'Checkbox',
  name: 'checkbox',
  size: 'medium',
  disabled: false
};

export const Small = Template.bind({});
Small.args = {
  theme: '',
  value: '',
  label: 'Checkbox',
  size: 'small'
};

export const Medium = Template.bind({});
Medium.args = {
  theme: '',
  value: '',
  label: 'Checkbox',
  size: 'medium'
};

export const Rounded = Template.bind({});
Rounded.args = {
  theme: '',
  value: '',
  label: 'Checkbox',
  rounded: true
};

export const Disabled = Template.bind({});
Disabled.args = {
  theme: '',
  value: '',
  label: 'Checkbox',
  disabled: true
};