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

/**
 * UiTextarea is a multi-line text-entry primitive for longer-form content like comments, descriptions, and prompts.
 * Pair it with `UiField` and `UiLabel` for accessible form layouts; for single-line inputs, use `UiInput`.
 */
const meta: Meta<typeof UiTextarea> = {
  title: 'Components/UiTextarea',
  component: UiTextarea,
  tags: ['autodocs'],
  argTypes: {
    disabled: {
      control: 'boolean',
      description: 'Set component as disabled',
    },
    placeholder: {
      control: 'text',
      description: 'Set placeholder text',
    },
  },
  args: {
    name: 'textarea',
    disabled: false,
    placeholder: 'Type your message here.',
  },
};

export default meta;

type Story = StoryObj<typeof UiTextarea>;

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

const value = ref('')
</script>

<template>
  <div class="grid w-full gap-1.5">
    <label for="message" class="body-14-medium">Your message</label>
    <UiTextarea id="message" v-model="value" name="message" placeholder="Type your message here." />
  </div>
</template>`;

/**
 * Default textarea with a label.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiTextarea },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: `
      <div class="grid w-full gap-1.5">
        <label for="message" class="body-14-medium">Your message</label>
        <UiTextarea id="message" v-model="value" name="message" :placeholder="args.placeholder" :disabled="args.disabled" />
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

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

<template>
  <div class="grid w-full gap-1.5">
    <label for="message" class="body-14-medium">Your message</label>
    <UiTextarea id="message" name="message" placeholder="Type your message here." disabled />
  </div>
</template>`;

/**
 * Textarea in disabled state.
 */
export const Disabled: Story = {
  args: {
    disabled: true,
  },
  render: (args) => ({
    components: { UiTextarea },
    setup() {
      return { args };
    },
    template: `
      <div class="grid w-full gap-1.5">
        <label for="message" class="body-14-medium">Your message</label>
        <UiTextarea id="message" name="message" :placeholder="args.placeholder" :disabled="args.disabled" />
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: disabledTemplateSource,
      },
    },
  },
};
