import type { Meta, StoryObj } from '@storybook/vue3-vite';
import UiLabel from './UiLabel.vue';
import { UiInput } from '../UiInput';
import { UiCheckbox } from '../UiCheckbox';

/**
 * UiLabel provides accessible text labels for form elements. Use to identify
 * inputs, improve accessibility, and enable click-to-focus behavior via the `for` attribute.
 */
const meta: Meta<typeof UiLabel> = {
  title: 'Components/UiLabel',
  component: UiLabel,
  tags: ['autodocs'],
  argTypes: {
    for: {
      control: 'text',
      description: 'The id of the form element this label is associated with',
    },
  },
};

export default meta;

type Story = StoryObj<typeof UiLabel>;

const defaultTemplateSource = `<script setup lang="ts">
import { UiLabel } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiLabel for="email">Email</UiLabel>
</template>`;

/**
 * Default label displaying text content. Use the `for` attribute to associate
 * the label with a form element, enabling click-to-focus accessibility.
 */
export const Default: Story = {
  render: () => ({
    components: { UiLabel },
    template: `<UiLabel for="email">Email</UiLabel>`,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const withInputTemplateSource = `<script setup lang="ts">
import { UiLabel, UiInput } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="grid w-full max-w-sm items-center gap-1.5">
    <UiLabel for="email">Email</UiLabel>
    <UiInput id="email" name="email" type="email" placeholder="Enter your email" />
  </div>
</template>`;

/**
 * Label associated with an input field using the `for` attribute.
 * Clicking the label will focus the input.
 */
export const WithInput: Story = {
  render: () => ({
    components: { UiLabel, UiInput },
    template: `
      <div class="grid w-full max-w-sm items-center gap-1.5">
        <UiLabel for="email">Email</UiLabel>
        <UiInput id="email" name="email" type="email" placeholder="Enter your email" />
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: withInputTemplateSource,
      },
    },
  },
};

const withCheckboxTemplateSource = `<script setup lang="ts">
import { UiLabel, UiCheckbox } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="flex items-center gap-x-2">
    <UiCheckbox id="terms" name="terms" />
    <UiLabel for="terms">Accept terms and conditions</UiLabel>
  </div>
</template>`;

/**
 * Label paired with a checkbox for toggle options like terms acceptance.
 * Position the label after the checkbox for standard form patterns.
 */
export const WithCheckbox: Story = {
  render: () => ({
    components: { UiLabel, UiCheckbox },
    template: `
      <div class="flex items-center gap-x-2">
        <UiCheckbox id="terms" name="terms" />
        <UiLabel for="terms">Accept terms and conditions</UiLabel>
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: withCheckboxTemplateSource,
      },
    },
  },
};

const disabledStateTemplateSource = `<script setup lang="ts">
import { UiLabel, UiInput } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="grid w-full max-w-sm items-center gap-1.5" data-disabled="true">
    <UiLabel for="disabled-input">Disabled Field</UiLabel>
    <UiInput id="disabled-input" name="disabled-input" disabled placeholder="Disabled" />
  </div>
</template>`;

/**
 * Label with a disabled input field. The label automatically applies muted
 * styling when the parent container has `data-disabled="true"` attribute.
 */
export const DisabledState: Story = {
  render: () => ({
    components: { UiLabel, UiInput },
    template: `
      <div class="grid w-full max-w-sm items-center gap-1.5" data-disabled="true">
        <UiLabel for="disabled-input">Disabled Field</UiLabel>
        <UiInput id="disabled-input" name="disabled-input" disabled placeholder="Disabled" />
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: disabledStateTemplateSource,
      },
    },
  },
};

const requiredFieldTemplateSource = `<script setup lang="ts">
import { UiLabel, UiInput } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="grid w-full max-w-sm items-center gap-1.5">
    <UiLabel for="required-input">
      Username
      <span class="text-destructive">*</span>
    </UiLabel>
    <UiInput id="required-input" name="required-input" required placeholder="Enter username" />
  </div>
</template>`;

/**
 * Label for a required field with a red asterisk indicator. Use slot content
 * to add custom elements like required markers alongside the label text.
 */
export const RequiredField: Story = {
  render: () => ({
    components: { UiLabel, UiInput },
    template: `
      <div class="grid w-full max-w-sm items-center gap-1.5">
        <UiLabel for="required-input">
          Username
          <span class="text-destructive">*</span>
        </UiLabel>
        <UiInput id="required-input" name="required-input" required placeholder="Enter username" />
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: requiredFieldTemplateSource,
      },
    },
  },
};
