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

import { RooCheckbox } from "../ui-components/RooCheckbox";
import { CheckboxInfo } from "../ui-components/RooCheckbox/CheckboxInfo";

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

const Template: ComponentStory<typeof RooCheckbox> = (args) => <RooCheckbox {...args} />;

const InfoTemplate: ComponentStory<typeof RooCheckbox> = () => {
  return (
    <>
      <CheckboxInfo />
      <RooCheckbox defaultChecked={false} name={"Default to off"} />
      <RooCheckbox checked={true} name={"Selected option"} />
      <RooCheckbox disabled={true} name={"Disabled option"} />
    </>
  );
};

export const CheckboxDetails = InfoTemplate.bind({});

export const NotSelected = Template.bind({});
NotSelected.args = {
  name: "Not selected option",
};
export const Selected = Template.bind({});
Selected.args = {
  name: "Selected option",
  checked: true,
};
export const Disabled = Template.bind({});
Disabled.args = {
  name: "Disabled option",
  disabled: true,
};
