import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

import {
  Examples,
  Example,
  Note,
  Title,
  CustomArgsTable,
  VariantsTable,
  VariantRow,
} from "@calcom/storybook/components";

import { CheckboxField as Checkbox } from "./Checkbox";

<Meta title="UI/Form/Checkbox" component={Checkbox} />

<Title title="Checkbox  " suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />

## Definition

Checkboxes are used in forms and databases to indicate an answer to a question, apply a batch of settings or allow the user to make a multi-selection from a list. Alternatively, a single checkbox may be used for making single selections

## Structure

<CustomArgsTable of={Checkbox} />

<Examples title="Checkbox style">
  <Example title="Default">
    <Checkbox label="Default" />
  </Example>
  <Example title="Error">
    <Checkbox label="Error" error />
  </Example>
  <Example title="Disabled">
    <Checkbox label="Disabled" disabled />
  </Example>
  <Example title="Disabled">
    <Checkbox label="Disabled Checked" checked disabled />
  </Example>
</Examples>

<Examples title="Description As Label">
  <Example title="Default">
    <Checkbox descriptionAsLabel description="Default Description" />
  </Example>
  <Example title="Error">
    <Checkbox descriptionAsLabel description="Default Description" error />
  </Example>
  <Example title="Disabled">
    <Checkbox descriptionAsLabel description="Default Description" disabled />
  </Example>
  <Example title="Disabled">
    <Checkbox descriptionAsLabel description="Default Description" disabled checked />
  </Example>
</Examples>

<Canvas>
  <Story
    name="Checkbox"
    args={{
      label: "Default",
      description: "Default Description",
      error: false,
      disabled: false,
    }}
    argTypes={{
      label: {
        control: {
          type: "text",
        },
      },
      description: {
        control: {
          type: "text",
        },
      },
      error: {
        control: {
          type: "boolean",
        },
      },
      disabled: {
        control: {
          type: "boolean",
        },
      },
    }}>
    {({ label, description, error, disabled }) => (
      <VariantsTable titles={[""]} columnMinWidth={150}>
        <VariantRow variant="Default">
          <Checkbox label={label} error={error} disabled={disabled} />
        </VariantRow>
        <VariantRow variant="Description As Label">
          <Checkbox description={description} error={error} disabled={disabled} descriptionAsLabel />
        </VariantRow>
      </VariantsTable>
    )}
  </Story>
</Canvas>