import React from "react";
import { Label } from "../components/Label";
import { Switch } from "../components/Switch";
import { Toaster, useToast } from "../components/Toast";

export default {
  title: "React/Switch",
};

export const Default = () => <Switch />;

export const Disabled = () => <Switch disabled />;

export const DisabledChecked = () => <Switch disabled checked />;

export const WithLabel = () => (
  <Label direction="horizontal">
    <Switch />
    <span>Switch</span>
  </Label>
);

export const Controlled = () => {
  const [checked, setChecked] = React.useState(false);
  const { toast } = useToast();

  React.useEffect(() => {
    toast({
      title: "Switch changed",
      description: `The switch was changed to ${checked ? "true" : "false"}`,
    });
  }, [checked, toast]);

  return (
    <>
      <Toaster />
      <Label direction="horizontal">
        <Switch
          checked={checked}
          onChange={(e) => setChecked(e.target.checked)}
        />
        <span>Click here to toggle!</span>
      </Label>
    </>
  );
};