import { action } from '@storybook/addon-actions';
import type { Meta, Story } from '@storybook/react';

import MuiGrid from '@mui/material/Grid';

import { Switch } from './switch';
import type { SwitchProps } from './switch';

const args: SwitchProps = {
  size: 'small',
  onChange: action('Toggled')
};

export default {
  args,
  component: Switch,
  title: 'Forms/Toggle (Switch)',
  argTypes: {
    size: {
      description: 'The size of the toggle (on/off switch).',
      options: ['small', 'medium', undefined],
      control: {
        type: 'select'
      },
      table: {
        defaultValue: {
          summary: 'medium'
        }
      }
    }
  }
} as Meta;

const SwitchTemplate: Story<SwitchProps> = args => {
  return <Switch {...args} />;
};

const ToggleTemplate: Story<SwitchProps> = args => {
  return (
    <MuiGrid container direction="column" spacing={2} width={216}>
      <MuiGrid item>
        <Switch label="Default" {...args} />
      </MuiGrid>
      <MuiGrid item>
        <Switch label="Hover" hovered {...args} />
      </MuiGrid>
      <MuiGrid item>
        <Switch label="Active" defaultChecked {...args} />
      </MuiGrid>
      <MuiGrid item>
        <Switch label="Active Hover" defaultChecked hovered {...args} />
      </MuiGrid>
      <MuiGrid item>
        <Switch label="Disabled" defaultChecked disabled {...args} />
      </MuiGrid>
    </MuiGrid>
  );
};

export const Primary = SwitchTemplate.bind({});
Primary.args = {
  defaultChecked: false,
  disabled: false
};

export const ControlledSwitch = SwitchTemplate.bind({});
ControlledSwitch.args = {
  size: 'medium',
  checked: false,
  disabled: false,
  hovered: false,
  label: ''
};

export const ToggleBig = ToggleTemplate.bind({});
ToggleBig.args = {
  size: 'medium'
};

export const ToggleSmall = ToggleTemplate.bind({});
ToggleSmall.args = {
  size: 'small'
};