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

const meta = {
  component: TitanSelectCustomInput,
  title: 'Internal/TitanSelectCustomInput',
  tags: ['autodocs', 'internal'],
  argTypes: {
    modelValue: {
      control: 'text',
      description: 'Current input value (v-model)',
      table: {
        type: { summary: 'string' },
      },
    },
    placeholder: {
      control: 'text',
      description: 'Placeholder text for the input field',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'Enter custom value...' },
      },
    },
    'onUpdate:modelValue': {
      action: 'update:modelValue',
      description: 'Emitted when the input value changes',
    },
    onSubmit: {
      action: 'submit',
      description: 'Emitted when user submits (clicks Add or presses Enter)',
    },
    onCancel: {
      action: 'cancel',
      description: 'Emitted when user cancels (clicks Cancel or presses Escape)',
    },
  },
} satisfies Meta<typeof TitanSelectCustomInput>;

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

/**
 * Default custom input with empty value.
 * Used internally by TitanSelectContainer for entering custom select values.
 */
export const Default: Story = {
  render: (args) => ({
    components: { TitanSelectCustomInput },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanSelectCustomInput v-bind="args" v-model="value" />',
  }),
  args: {},
};

/**
 * Custom input with a custom placeholder.
 */
export const CustomPlaceholder: Story = {
  render: (args) => ({
    components: { TitanSelectCustomInput },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanSelectCustomInput v-bind="args" v-model="value" />',
  }),
  args: {
    placeholder: 'Type a custom option...',
  },
};

/**
 * Custom input with a pre-filled value.
 */
export const PreFilled: Story = {
  render: (args) => ({
    components: { TitanSelectCustomInput },
    setup() {
      const value = ref('Custom value');
      return { args, value };
    },
    template: '<TitanSelectCustomInput v-bind="args" v-model="value" />',
  }),
  args: {},
};

/**
 * Interactive playground for testing all props and events.
 * Try typing a value and clicking Add/Cancel or pressing Enter/Escape.
 */
export const Playground: Story = {
  render: (args) => ({
    components: { TitanSelectCustomInput },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanSelectCustomInput v-bind="args" v-model="value" />',
  }),
  args: {
    placeholder: 'Enter custom value...',
  },
};