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

import { WithScreenshotArea } from "~~/.storybook/decorators/with-screenshot-area"

import VCheckbox from "~/components/VCheckbox/VCheckbox.vue"
import VLicense from "~/components/VLicense/VLicense.vue"

<Meta
  title="Components/VCheckbox"
  components={VCheckbox}
  decorators={[WithScreenshotArea]}
  argTypes={{
    change: {
      action: "change",
    },
  }}
/>

export const checkboxArgTypes = {
  id: { control: { type: "text" } },
  checked: { control: { type: "boolean" } },
  name: { control: { type: "text" } },
  value: { control: { type: "text" } },
  disabled: { control: { type: "boolean" } },
}

export const Template = (args) => ({
  template: `<VCheckbox v-bind="args" v-on="args" class="mb-4">Code is Poetry</VCheckbox>`,
  components: { VCheckbox },
  setup() {
    return { args }
  },
})

# VCheckbox

<Description of={VCheckbox} />

## Default checkbox

<Canvas>
  <Story
    name="Default"
    args={{
      id: "default",
      name: "storybook",
      value: "codeIsPoetry",
    }}
    argTypes={checkboxArgTypes}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable of={VCheckbox} />

export const LicenseCheckboxTemplate = (args) => ({
  template: `<fieldset>
<legend>License</legend>
<VCheckbox v-bind="args" v-on="args" class="mb-4">
<VLicense license="by-nc" class="me-4"/>
</VCheckbox>
</fieldset>`,
  components: { VCheckbox, VLicense },
  setup() {
    return { args }
  },
})

## License Checkbox

The checkbox label can be a string or another component. Here, we use a VLicense
component, and set `checked` prop to `true` to set the checkbox as checked on
render.

<Canvas>
  <Story
    name="License Checkbox"
    args={{
      id: "cc-by",
      name: "license",
      value: "cc-by",
      checked: true,
    }}
    argTypes={checkboxArgTypes}
  >
    {LicenseCheckboxTemplate.bind({})}
  </Story>
</Canvas>
