import { useState } from 'react';
import { fn } from 'storybook/test';

import Switch, { SwitchProps } from './Switch';
import { Field } from '../field/Field';
import { Meta, StoryObj } from '@storybook/react-webpack5';
import { Label } from '../label';

const meta: Meta<typeof Switch> = {
  component: Switch,
  title: 'Actions/Switch',
  args: {
    checked: false,
    disabled: false,
    id: 'switchId',
    className: 'switchClassName',
    'aria-labelledby': undefined,
    'aria-label': undefined,
    onClick: fn(),
  },
} satisfies Meta<typeof Switch>;

export default meta;
type Story = StoryObj<typeof Switch>;

export const Basic: Story = {
  tags: ['!autodocs', '!dev'],
};

export const Playground: Story = {
  tags: ['!autodocs'],
  argTypes: {
    onClick: { table: { disable: true } },
  },
};

export const Interactivity: Story = {
  render: function Render({ disabled }: SwitchProps) {
    const [checked1, setCheck1] = useState(false);
    const [checked2, setCheck2] = useState(true);
    const [checked3, setCheck3] = useState(false);

    return (
      <>
        <Field id="fieldId" label="Using Field component">
          <Switch checked={checked1} disabled={disabled} onClick={() => setCheck1(!checked1)} />
        </Field>

        <div>
          <Label htmlFor="labelId">Using Label component</Label>
          <Switch
            id="labelId"
            checked={checked2}
            disabled={disabled}
            onClick={() => setCheck2(!checked2)}
          />
        </div>

        <div>
          <strong id="ariaId" className="d-block">
            Using `aria-labelledby`
          </strong>
          <Switch
            aria-labelledby="ariaId"
            checked={checked3}
            disabled={disabled}
            onClick={() => setCheck3(!checked3)}
          />
        </div>
      </>
    );
  },
  parameters: {
    docs: {
      source: {
        code: `
function Render() {
  const [checked1, setCheck1] = useState(false);
  const [checked2, setCheck2] = useState(true);
  const [checked3, setCheck3] = useState(false);
  
  return (
    <>
      <Field id="fieldId" label="Using Field component">
        <Switch
          checked={checked1}
          onClick={() => setCheck1(!checked1)}
        />
      </Field>
  
      <div>
        <Label htmlFor="labelId">Using standalone Label component</Label>
        <Switch
          id="labelId"
          checked={checked2}
          onClick={() => setCheck2(!checked2)}
        />
      </div>
  
      <div>
        <strong id="ariaId" className="d-block">Using \`aria-labelledby\`</strong>
        <Switch
          aria-labelledby="ariaId"
          checked={checked3}
          onClick={() => setCheck3(!setCheck3)}
        />
      </div>
    </>
  )
}`,
      },
    },
  },
  decorators: [
    (Story: any) => (
      <div className="d-flex flex-column" style={{ gap: '1rem' }}>
        <Story />
      </div>
    ),
  ],
  args: {},
  argTypes: {
    checked: { table: { disable: true } },
    onClick: { table: { disable: true } },
  },
};

export const Disabled: Story = {
  render: function Render(args) {
    const [checked1, setCheck1] = useState(false);
    const [checked2, setCheck2] = useState(true);

    return (
      <>
        <Field label="Switch label">
          <Switch checked={checked1} disabled onClick={() => setCheck1(!checked1)} />
        </Field>

        <Field label="Switch label">
          <Switch checked={checked2} disabled onClick={() => setCheck2(!checked2)} />
        </Field>
      </>
    );
  },
  parameters: {
    docs: {
      source: {
        code: `
function Render() {
  const [checked1, setCheck1] = useState(false);
  const [checked2, setCheck2] = useState(true);

  return (
    <>
      <Field label="Switch label">
        <Switch
          checked={checked1}
          disabled
          onClick={() => setCheck1(!checked1)}
        />
      </Fie 
      <Field label="Switch label">
        <Switch
          checked={checked2}
          disabled
          onClick={() => setCheck2(!checked2)}
        />
      </Field>
    </>
  );
}`,
      },
    },
  },
  args: {
    disabled: true,
  },
  argTypes: {
    disabled: { table: { readonly: true } },
    onClick: { table: { disable: true } },
    checked: { table: { disable: true } },
  },
};
