import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'

import BaseInputLabel from '@/components/BaseInputLabel.vue'

import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'

const meta = {
  title: 'Atoms/BaseInputLabel',
  component: BaseInputLabel,
  argTypes: {
    isInvalid: {
      control: 'boolean',
      description: 'Whether the label should show an invalid state',
    },
  },
} satisfies Meta<typeof BaseInputLabel>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default label used above form controls. Use the controls to experiment
 * with each prop in isolation.
 */
export const Default: Story = {
  args: { isInvalid: false },
  render: (args: Args) => ({
    components: { BaseInputLabel },
    setup() {
      return { args }
    },
    template: `
      <div class="baseInputLabel-story">
        <BaseInputLabel v-bind="args">Default Label</BaseInputLabel>
      </div>
    `,
  }),
}

/**
 * Default and invalid states side by side.
 */
export const States: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { BaseInputLabel },
    setup() {
      return { docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Default</span>
          <BaseInputLabel>Default Label</BaseInputLabel>
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Invalid</span>
          <BaseInputLabel :is-invalid="true">Invalid Label</BaseInputLabel>
        </div>
      </div>
    `,
  }),
}