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

const meta = {
  component: TitanInput,
  title: 'UI/TitanInput',
  tags: ['autodocs'],
  argTypes: {
    modelValue: {
      control: 'text',
      description: 'The input\'s current value (v-model)',
      table: {
        type: { summary: 'string | number' },
      },
    },
    type: {
      control: 'select',
      options: ['text', 'email', 'password', 'tel', 'url', 'search', 'number'],
      description: 'Input type attribute',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'text' },
      },
    },
    label: {
      control: 'text',
      description: 'Label text for floating label',
      table: {
        type: { summary: 'string' },
      },
    },
    placeholder: {
      control: 'text',
      description: 'Placeholder text',
      table: {
        type: { summary: 'string' },
      },
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the input is disabled',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    readonly: {
      control: 'boolean',
      description: 'Whether the input is readonly',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    required: {
      control: 'boolean',
      description: 'Whether the input is required',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    error: {
      control: 'boolean',
      description: 'Whether the input has an error state',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    errorMessage: {
      control: 'text',
      description: 'Error message to display',
      table: {
        type: { summary: 'string' },
      },
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
      description: 'Input size variant',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'md' },
      },
    },
  },
} satisfies Meta<typeof TitanInput>;

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

/**
 * Default input with floating label.
 * The label floats up when the input is focused or has a value.
 */
export const Default: Story = {
  render: (args) => ({
    components: { TitanInput },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanInput v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Full Name',
  },
};

/**
 * Input with placeholder text (no floating label).
 */
export const WithPlaceholder: Story = {
  render: (args) => ({
    components: { TitanInput },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanInput v-bind="args" v-model="value" />',
  }),
  args: {
    placeholder: 'Enter your name',
  },
};

/**
 * Input with initial value to show floating label behavior.
 */
export const WithValue: Story = {
  render: (args) => ({
    components: { TitanInput },
    setup() {
      const value = ref('John Doe');
      return { args, value };
    },
    template: '<TitanInput v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Full Name',
  },
};

/**
 * Required input field with asterisk indicator.
 */
export const Required: Story = {
  render: (args) => ({
    components: { TitanInput },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanInput v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Email Address',
    type: 'email',
    required: true,
  },
};

/**
 * Input with error state and error message.
 */
export const WithError: Story = {
  render: (args) => ({
    components: { TitanInput },
    setup() {
      const value = ref('invalid-email');
      return { args, value };
    },
    template: '<TitanInput v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Email Address',
    type: 'email',
    error: true,
    errorMessage: 'Please enter a valid email address',
  },
};

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

/**
 * Readonly input field.
 */
export const Readonly: Story = {
  render: (args) => ({
    components: { TitanInput },
    setup() {
      const value = ref('Read only value');
      return { args, value };
    },
    template: '<TitanInput v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Readonly Field',
    readonly: true,
  },
};

/**
 * Small size input variant.
 */
export const SmallSize: Story = {
  render: (args) => ({
    components: { TitanInput },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanInput v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Small Input',
    size: 'sm',
  },
};

/**
 * Large size input variant.
 */
export const LargeSize: Story = {
  render: (args) => ({
    components: { TitanInput },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanInput v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Large Input',
    size: 'lg',
  },
};

/**
 * Password input type.
 */
export const PasswordInput: Story = {
  render: (args) => ({
    components: { TitanInput },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanInput v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Password',
    type: 'password',
    required: true,
  },
};

/**
 * Number input type.
 */
export const NumberInput: Story = {
  render: (args) => ({
    components: { TitanInput },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanInput v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Age',
    type: 'number',
  },
};

/**
 * Interactive playground for all input props.
 * Use the Controls panel to experiment with different combinations.
 */
export const Playground: Story = {
  render: (args) => ({
    components: { TitanInput },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanInput v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Full Name',
    type: 'text',
    disabled: false,
    readonly: false,
    required: false,
    error: false,
    size: 'md',
  },
};