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

const meta = {
  component: TitanDatePicker,
  title: 'UI/TitanDatePicker',
  tags: ['autodocs'],
  argTypes: {
    modelValue: {
      control: 'text',
      description: 'The date picker\'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' },
      },
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the date picker is disabled',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    readonly: {
      control: 'boolean',
      description: 'Whether the date picker is readonly',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    required: {
      control: 'boolean',
      description: 'Whether the date picker is required',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    error: {
      control: 'boolean',
      description: 'Whether the date picker has an error state',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    errorMessage: {
      control: 'text',
      description: 'Error message to display',
      table: {
        type: { summary: 'string' },
      },
    },
    min: {
      control: 'text',
      description: 'Minimum date (ISO string format)',
      table: {
        type: { summary: 'string' },
      },
    },
    max: {
      control: 'text',
      description: 'Maximum date (ISO string format)',
      table: {
        type: { summary: 'string' },
      },
    },
  },
} satisfies Meta<typeof TitanDatePicker>;

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

/**
 * Default date picker with floating label.
 */
export const Default: Story = {
  render: (args) => ({
    components: { TitanDatePicker },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanDatePicker v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Date of Birth',
  },
};

/**
 * Date picker with initial value.
 */
export const WithValue: Story = {
  render: (args) => ({
    components: { TitanDatePicker },
    setup() {
      const value = ref('1990-01-15');
      return { args, value };
    },
    template: '<TitanDatePicker v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Date of Birth',
  },
};

/**
 * Date picker with min and max constraints.
 */
export const WithMinMax: Story = {
  render: (args) => ({
    components: { TitanDatePicker },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanDatePicker v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Appointment Date',
    min: '2025-01-01',
    max: '2025-12-31',
  },
};

/**
 * Required date picker.
 */
export const Required: Story = {
  render: (args) => ({
    components: { TitanDatePicker },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanDatePicker v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Event Date',
    required: true,
  },
};

/**
 * Date picker with error state.
 */
export const WithError: Story = {
  render: (args) => ({
    components: { TitanDatePicker },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanDatePicker v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Date of Birth',
    error: true,
    errorMessage: 'Please select a valid date',
    required: true,
  },
};

/**
 * Disabled date picker.
 */
export const Disabled: Story = {
  render: (args) => ({
    components: { TitanDatePicker },
    setup() {
      const value = ref('2025-06-15');
      return { args, value };
    },
    template: '<TitanDatePicker v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Locked Date',
    disabled: true,
  },
};

/**
 * Readonly date picker.
 */
export const Readonly: Story = {
  render: (args) => ({
    components: { TitanDatePicker },
    setup() {
      const value = ref('2025-03-20');
      return { args, value };
    },
    template: '<TitanDatePicker v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Readonly Date',
    readonly: true,
  },
};

/**
 * Interactive playground for all date picker props.
 */
export const Playground: Story = {
  render: (args) => ({
    components: { TitanDatePicker },
    setup() {
      const value = ref('');
      return { args, value };
    },
    template: '<TitanDatePicker v-bind="args" v-model="value" />',
  }),
  args: {
    label: 'Date of Birth',
    disabled: false,
    readonly: false,
    required: false,
    error: false,
  },
};