import React from 'react';

import { ComponentMeta, ComponentStory } from '@storybook/react';

import Checkbox from './Checkbox';

export default {
  // Title inside navigation bar
  title: 'Checkbox',
  // Component to test
  component: Checkbox,
  // Clarifying the way how to process specific
  // properties of your component and which values
  // it can accept.
  argTypes: {
    checked: {
      options: [true, false],
      control: { type: 'radio' },
    },
  },
} as ComponentMeta<typeof Checkbox>;

/**
 * This is a way to define a tempalte for your component.
 * 
 * This template should cover all the states.
 * 
 * In most cases you should just distruct args attribute
 * on a returning component.
 */
const Template: ComponentStory<typeof Checkbox> = (args) => (
  <Checkbox {...args} />
);

/* -------------------------------------------------------------------------- */
/*                          States of your component                          */
/* -------------------------------------------------------------------------- */

export const Unchecked = Template.bind({});
Unchecked.args = {
  label: "On/off lights",
  checked: false,
  children: undefined,
}
export const Checked = Template.bind({});
Checked.args = {
  children: "On/off lights",
  checked: true,
  label: undefined,
}

export const EitherLabelChildren = Template.bind({});
EitherLabelChildren.args = {
  children: "On/off lights",
  checked: true,
  label: "Label!",
}
// GO Further