import { useState } from 'react';

import Switch from './Switch';
import { Field } from '../field/Field';

export default {
  component: Switch,
  title: 'Actions/Switch',
};

export const Basic = () => {
  const [checked1, setCheck1] = useState(false);
  const [checked2, setCheck2] = useState(true);

  return (
    <div className="d-flex flex-column">
      <Field id="switchId" label="A switch with a label" required>
        <Switch
          checked={checked1}
          className="a-class-name"
          id="switchId"
          onClick={() => setCheck1(!checked1)}
        />
      </Field>
      <Switch
        aria-label="I'm a switch without label"
        checked={checked2}
        className="a-class-name"
        onClick={() => setCheck2(!checked2)}
      />
    </div>
  );
};

export const Disabled = () => {
  const [checked, setCheck] = useState(false);

  return (
    <div className="d-flex flex-column">
      <Field id="switchId" label="A switch with a label" required>
        <Switch
          checked={checked}
          disabled
          className="a-class-name"
          id="switchId"
          onClick={() => setCheck(!checked)}
        />
      </Field>
      <Switch
        aria-label="I'm a switch without label"
        checked={!checked}
        disabled
        className="a-class-name"
        id="switchId1"
        onClick={() => setCheck(!checked)}
      />
    </div>
  );
};
