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

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

export default {
  title: "Form Fields/Toggle",
  component: Toggle,
} as ComponentMeta<typeof Toggle>;

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

const InfoTemplate: ComponentStory<typeof Toggle> = () => {
  return (
    <>
      <ToggleInfo />
      <Toggle defaultChecked={true} checked={true} name="Default selected" />
      <Toggle defaultChecked={false} name="Default not selected" />
      <Toggle 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",
};
