import React, { useState } from 'react';
import { ToggleButtonGroup, ToggleButton } from '.';
import { SvgCheck } from '../../assets/images/icons';

export default {
  title: 'Toggle Button',
  component: [ToggleButtonGroup, ToggleButton],
};

export const Radio = () => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };
  const [value, setValue] = useState('opt1');
  return (
    <ToggleButtonGroup onChange={handleChange} value={value}>
      <ToggleButton
        value="opt1"
        width="136px"
        height="40px"
        borderRadius="100px"
      >
        {value === 'opt1' && <SvgCheck />}Option 1
      </ToggleButton>
      <ToggleButton value="opt2" width="136px" height="40px">
        Option 2
      </ToggleButton>
    </ToggleButtonGroup>
  );
};

export const RadioDisable = () => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };
  const [value, setValue] = useState('opt1');
  return (
    <ToggleButtonGroup onChange={handleChange} value={value}>
      <ToggleButton value="opt1" disabled>
        Option 1
      </ToggleButton>
      <ToggleButton value="opt2" disabled>
        Option 2
      </ToggleButton>
    </ToggleButtonGroup>
  );
};

export const Checkbox = () => {
  const [value1, setValue1] = useState(true);
  const [value2, setValue2] = useState(false);
  return (
    <>
      <ToggleButton
        checked={value1}
        m="20px"
        onChange={(e) => setValue1(e.target.checked)}
      >
        Option 1
      </ToggleButton>
      <ToggleButton
        checked={value2}
        onChange={(e) => setValue2(e.target.checked)}
      >
        Option 2
      </ToggleButton>
    </>
  );
};

export const CheckboxDisable = () => {
  const [value1, setValue1] = useState(true);
  const [value2, setValue2] = useState(false);
  return (
    <>
      <ToggleButton
        checked={value1}
        m="20px"
        onChange={(e) => setValue1(e.target.checked)}
        disabled
      >
        Option 1
      </ToggleButton>
      <ToggleButton
        checked={value2}
        onChange={(e) => setValue2(e.target.checked)}
        disabled
      >
        Option 2
      </ToggleButton>
    </>
  );
};
