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

const meta = {
  component: TitanTextarea,
  title: 'UI/TitanTextarea',
  tags: ['autodocs'],
  argTypes: {
    modelValue: {
      control: 'text',
      description: 'The textarea\'s current value (v-model)',
      table: {
        type: { summary: 'string' },
      },
    },
    label: {
      control: 'text',
      description: 'Label text for floating label',
      table: {
        type: { summary: 'string' },
      },
    },
    placeholder: {
      control: 'text',
      description: 'Placeholder text',
      table: {
        type: { summary: 'string' },
      },
    },
    rows: {
      control: 'number',
      description: 'Number of visible text lines',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: 4 },
      },
    },
    maxlength: {
      control: 'number',
      description: 'Maximum number of characters allowed',
      table: {
        type: { summary: 'number' },
      },
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the textarea is disabled',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    readonly: {
      control: 'boolean',
      description: 'Whether the textarea is readonly',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    required: {
      control: 'boolean',
      description: 'Whether the textarea is required',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    error: {
      control: 'boolean',
      description: 'Whether the textarea has an error state',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    errorMessage: {
      control: 'text',
      description: 'Error message to display',
      table: {
        type: { summary: 'string' },
      },
    },
    autoResize: {
      control: 'boolean',
      description: 'Whether to enable automatic resizing',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
  },
} satisfies Meta<typeof TitanTextarea>;

export default meta;
type Story = StoryObj<typeof meta>;

/**
 * Default textarea with floating label.
 */
export const Default: Story = {
  render: (args) => ({
    components: { TitanTextarea },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanTextarea v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Comments',
  },
};

/**
 * Textarea with initial value.
 */
export const WithValue: Story = {
  render: (args) => ({
    components: { TitanTextarea },
    setup() {
      const value = ref('This is some initial text content.');
      return { args, value };
    },
    template: '<TitanTextarea v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Description',
  },
};

/**
 * Textarea with character limit.
 */
export const WithMaxLength: Story = {
  render: (args) => ({
    components: { TitanTextarea },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanTextarea v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Short Message',
    maxlength: 100,
  },
};

/**
 * Textarea with error state.
 */
export const WithError: Story = {
  render: (args) => ({
    components: { TitanTextarea },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanTextarea v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Required Field',
    error: true,
    errorMessage: 'This field is required',
    required: true,
  },
};

/**
 * Disabled textarea.
 */
export const Disabled: Story = {
  render: (args) => ({
    components: { TitanTextarea },
    setup() {
      const value = ref('Cannot edit this content');
      return { args, value };
    },
    template: '<TitanTextarea v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Disabled Field',
    disabled: true,
  },
};

/**
 * Readonly textarea.
 */
export const Readonly: Story = {
  render: (args) => ({
    components: { TitanTextarea },
    setup() {
      const value = ref('This content is read-only');
      return { args, value };
    },
    template: '<TitanTextarea v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Readonly Field',
    readonly: true,
  },
};

/**
 * Textarea with auto-resize enabled.
 */
export const AutoResize: Story = {
  render: (args) => ({
    components: { TitanTextarea },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanTextarea v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Auto-Resizing Text',
    autoResize: true,
    rows: 2,
  },
};

/**
 * Large textarea with more rows.
 */
export const LargeTextarea: Story = {
  render: (args) => ({
    components: { TitanTextarea },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanTextarea v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Extended Comments',
    rows: 8,
  },
};

/**
 * Interactive playground for all textarea props.
 */
export const Playground: Story = {
  render: (args) => ({
    components: { TitanTextarea },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanTextarea v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Comments',
    disabled: false,
    readonly: false,
    required: false,
    error: false,
    rows: 4,
    autoResize: false,
  },
};