import React, { ChangeEvent } from 'react';
import { Story } from '@storybook/react';
import Checkbox, { CheckboxProps } from '../components/Forms/Checkbox';

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

const Template: Story<CheckboxProps> = (args) => (
  <Checkbox
    disabled={args.disabled}
    title={args.title}
    id={args.id}
    callback={args.callback}
    value={args.value}
    checked={args.checked}
    controlled={args.controlled}
    dataAttr={args.dataAttr}
    inputTheme={args.inputTheme}
    spacing={args.spacing}
    theme={args.theme}
  />
);

export const Default = Template.bind({});
Default.args = {
  disabled: false,
  title: 'Default',
  id: 'input--default',
  value: 'default',
  checked: true,
  callback: (e: ChangeEvent<HTMLInputElement>, id: string) => {
    console.log(e, id);
  },
};

export const Disabled = Template.bind({});
Disabled.args = {
  disabled: true,
  title: 'Disabled',
  id: 'input--default',
  value: 'default',
  checked: true,
  callback: (e: ChangeEvent<HTMLInputElement>, id: string) => {
    console.log(e, id);
  },
  controlled: false,
};

export const Controlled = Template.bind({});
Controlled.args = {
  controlled: true,
  checked: true,
  title: 'Controlled',
  id: 'input--controlled',
  value: 'controlled',
  callback: (_e: ChangeEvent<HTMLInputElement>, _id: string) => {
    console.log('change something else in the app to control this checkbox');
  },
};

export const LongDefault = Template.bind({});
LongDefault.args = {
  title:
    "By checking this box, you agree to the terms and conditions within the previously linked document. Should you have any questions, please contact us at 555-555-5555. And remember, we are not responsible for any damages that may occur as a result of your use of this product. But we hope you enjoy it! However if you don't, we are also not responsible for that. Have a great day! Or not. We are not responsible for that either. Goodbye! PS - We are not responsible for your use of this product. PPS - We are not responsible for your use of this product. PPPS - We are not responsible for your use of this product. PPPPS - We are not responsible for your use of this product. PPPPPS - We are not responsible for your use of this product. PPPPPPS - We are not responsible for your use of this product. PPPPPPPS - We are not responsible for your use of this product. PPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPPPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPPPPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPPPPPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPPPPPPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPPPPPPPPPPPPPS - We are not responsible for your use of this product. PPPPPPPPPPPPPPPPPPPPPPS - We are not responsible for your use of this product. uh oh, I think I broke chatgpt. I'm sorry. I'm not responsible for that.",
  id: 'input--long-default',
  value: 'long-default',
  checked: true,
  callback: (e: ChangeEvent<HTMLInputElement>, id: string) => {
    console.log(e, id);
  },
};