import React, { useState } from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import { RooToggle } from "../ui-components/RooToggle";
import { ToggleInfo } from "../ui-components/RooToggle/ToggleInfo";

export default {
  title: "RooToggle",
  component: RooToggle,
} as ComponentMeta<typeof RooToggle>;

const Template: ComponentStory<typeof RooToggle> = (args) => {
  const [checked, setChecked] = useState(args.defaultChecked || false);
  return (
    <RooToggle
      {...args}
      checked={checked}
      onChange={() => setChecked(!checked)}
    ></RooToggle>
  );
};

const InfoTemplate: ComponentStory<typeof RooToggle> = () => {
  return (
    <>
      <ToggleInfo />
      <RooToggle defaultChecked={true} checked={true} name="Default selected" />
      <RooToggle defaultChecked={false} name="Default not selected" />
      <RooToggle defaultChecked={false} disabled={true} name="Disabled" />
    </>
  );
};
export const ToggleDetails = InfoTemplate.bind({});

export const ToggleOn = Template.bind({});
ToggleOn.args = {
  defaultChecked: true,
  name: "Other DVMs on Shift",
};

export const ToggleOff = Template.bind({});
ToggleOff.args = {
  defaultChecked: false,
  name: "Instantly Bookable Shifts",
};

export const ToggleDisabled = Template.bind({});
ToggleDisabled.args = {
  defaultChecked: false,
  disabled: true,
  name: "Only Favorites",
};
