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

/**
 * UiInput is a single-line text-entry primitive for short form values such as names, emails, and numbers.
 * Pair it with `UiField` and `UiLabel` for accessible form layouts; for multi-line content, use `UiTextarea`.
 */
const meta: Meta<typeof UiInput> = {
  title: 'Components/UiInput',
  component: UiInput,
  tags: ['autodocs'],
  argTypes: {
    disabled: {
      control: 'boolean',
      description: 'Set component as disabled',
    },
    required: {
      control: 'boolean',
      description: 'Set component as required',
    },
    placeholder: {
      control: 'text',
      description: 'Placeholder text',
    },
  },
  args: {
    name: 'input',
    disabled: false,
    required: false,
  },
};

export default meta;

type Story = StoryObj<typeof UiInput>;

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

<template>
  <UiInput type="email" name="email" placeholder="Email" />
</template>`;

/**
 * Default input field.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiInput },
    setup() {
      return { args };
    },
    template: `<UiInput type="email" name="email" placeholder="Email" :disabled="args.disabled" :required="args.required" />`,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

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

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

/**
 * Input with label for better accessibility.
 */
export const WithLabel: Story = {
  render: (args) => ({
    components: { UiInput },
    setup() {
      return { args };
    },
    template: `<div class="grid w-full max-w-sm items-center gap-1.5">
      <label for="email" class="body-14-medium">Email</label>
      <UiInput id="email" name="email" type="email" placeholder="Email" :disabled="args.disabled" :required="args.required" />
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: withLabelTemplateSource,
      },
    },
  },
};

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

<template>
  <UiInput name="disabled" disabled placeholder="Disabled input" />
</template>`;

/**
 * Disabled input field.
 */
export const Disabled: Story = {
  args: {
    disabled: true,
  },
  render: (args) => ({
    components: { UiInput },
    setup() {
      return { args };
    },
    template: `<UiInput name="disabled" :disabled="args.disabled" placeholder="Disabled input" />`,
  }),
  parameters: {
    docs: {
      source: {
        code: disabledTemplateSource,
      },
    },
  },
};

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

<template>
  <div class="flex w-full max-w-sm items-center gap-x-2">
    <UiInput name="email" type="email" placeholder="Email" />
    <UiButton type="submit">Subscribe</UiButton>
  </div>
</template>`;

/**
 * Input with button, commonly used for subscriptions or search.
 */
export const WithButton: Story = {
  render: (args) => ({
    components: { UiInput, UiButton },
    setup() {
      return { args };
    },
    template: `<div class="flex w-full max-w-sm items-center gap-x-2">
      <UiInput name="email" type="email" placeholder="Email" :disabled="args.disabled" />
      <UiButton type="submit">Subscribe</UiButton>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: withButtonTemplateSource,
      },
    },
  },
};

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

<template>
  <div class="grid w-full max-w-sm items-center gap-1.5">
    <label for="picture" class="body-14-medium">Picture</label>
    <UiInput id="picture" name="picture" type="file" />
  </div>
</template>`;

/**
 * File input for uploads.
 */
export const File: Story = {
  render: (args) => ({
    components: { UiInput },
    setup() {
      return { args };
    },
    template: `<div class="grid w-full max-w-sm items-center gap-1.5">
      <label for="picture" class="body-14-medium">Picture</label>
      <UiInput id="picture" name="picture" type="file" :disabled="args.disabled" />
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: fileTemplateSource,
      },
    },
  },
};
