import React, { useState } from 'react';
import { Meta, StoryObj } from '@storybook/react';
import Toggle from './Toggle';

const meta: Meta<typeof Toggle> = {
  title: 'Components/Toggle',
  component: Toggle,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    type: { control: { type: 'select' } },
    variant: { control: { type: 'select' } },
  },
};

type Story = StoryObj<typeof Toggle>;

const defaultArgs = {
  disabled: false,
  checked: false,
  id: 'toggle',
};
export const Default: Story = {
  args: {
    ...defaultArgs,
    type: 'default',
    variant: 'primary',
    checked: false,
  },
};
export const WithLabel: Story = {
  args: {
    ...defaultArgs,
    type: 'withLabel',
    variant: 'primary',
    enableLabel: 'Enable',
    disableLabel: 'Disable',
  },
};
// export const With_Icon: Story = {
//   args: {
//     ...defaultArgs,
//     type: 'withIcon',
//     variant: 'primary',
//     enableIcon: 'close_black',
//     disableIcon: 'close_black',
//   },
// };

export const withadjacentLabel: Story = {
  args: {
    ...defaultArgs,
    type: 'default',
    label: 'with adjacent label',
    variant: 'primary',
    enableLabel: 'Enable',
    disableLabel: 'Disable',
  },
};

export const Controlled: Story = {
  render: () => {
    const [checked, setChecked] = useState(false);
    const handleChange = (
      e: React.MouseEvent<HTMLInputElement, MouseEvent>
    ) => {
      setChecked((e.target as HTMLInputElement).checked);
    };
    return (
      <Toggle
        variant="primary"
        enableLabel="Yes"
        disableLabel="No"
        type="withLabel"
        disabled={false}
        checked={checked}
        onChange={handleChange}
        id="toggle"
      />
    );
  },
};

export default meta;