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

const meta: Meta<typeof FdsInput> = {
  title: 'FDS/Form/FdsInput',
  component: FdsInput,
  tags: ['autodocs'],
  argTypes: {
    value: {
      control: { type: 'text' },
      description: 'Input value (use v-model for two-way binding)',
    },
    label: {
      control: { type: 'text' },
      description: 'Label text displayed above the input',
    },
    disabled: {
      control: { type: 'boolean' },
      description: 'Disables the input field',
    },
    valid: {
      control: { type: 'select' },
      options: [true, false, null],
      description: 'Validation state: "true" for valid, "false" for invalid, "null" for neutral',
    },
    optional: {
      control: { type: 'boolean' },
      description: 'Marks the field as optional (hides invalid message if true)',
    },
    invalidMessage: {
      control: { type: 'text' },
      description: 'Error message displayed when validation is false',
    },
    required: {
      control: { type: 'boolean' },
      description: 'Marks the field as required',
    },
    labelLeft: {
      control: { type: 'boolean' },
      description: 'If true, positions the label to the left of the input',
    },
    meta: {
      control: { type: 'text' },
      description: 'Meta text displayed below the label',
    },
    type: {
      control: { type: 'select' },
      options: ['text', 'search', 'email', 'password', 'date'],
      description: 'Input type',
    },
    clearButton: {
      control: { type: 'boolean' },
      description: 'Shows a clear button when input has a value',
    },
    id: {
      control: { type: 'text' },
      description: 'HTML id attribute for the input',
    },
    mask: {
      control: { type: 'text' },
      description: 'IMask pattern string (e.g., "00000000-0000" for personnummer)',
    },
    maskOptions: {
      control: { type: 'object' },
      description: 'Additional IMask options (lazy defaults to true).',
    },
    maxlength: {
      control: { type: 'number' },
      description: 'Maximum length of the input',
    },
  },
  args: {
    value: '',
    label: 'Label',
    labelLeft: false,
    meta: '',
    valid: null,
    optional: false,
    invalidMessage: '',
    clearButton: false,
    disabled: false,
    required: false,
    type: 'text',
    mask: undefined,
    maskOptions: undefined,
    maxlength: undefined,
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Basic: Story = {
  render: (args: Story['args']) => ({
    components: { FdsInput },
    setup: () => ({ args }),
    template: '<FdsInput v-bind="args" />',
  }),
  args: {
    label: 'Namn',
    meta: 'Ange ditt fullständiga namn',
  },
}

export const WithVModel: Story = {
  render: () => ({
    components: { FdsInput },
    setup() {
      const text = ref('')
      return { text }
    },
    template: `
      <div>
        <FdsInput v-model="text" label="Sök" placeholder="Sök..." clearButton />
        <p class="mt-4">Värde: {{ text }}</p>
      </div>
    `,
  }),
}

export const WithMeta: Story = {
  render: (args: Story['args']) => ({
    components: { FdsInput },
    setup: () => ({ args }),
    template: '<FdsInput v-bind="args" meta="Detta är hjälptext som visas under labeln" />',
  }),
  args: {
    label: 'E-postadress',
  },
}

export const WithValidation: Story = {
  render: () => ({
    components: { FdsInput },
    setup() {
      const email = ref('')
      const valid = ref<null | boolean>(null)

      const validateEmail = (value: string) => {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
        if (value.length === 0) {
          valid.value = null
        } else if (emailRegex.test(value)) {
          valid.value = true
        } else {
          valid.value = false
        }
      }

      return { email, valid, validateEmail }
    },
    template: `
      <FdsInput
        v-model="email"
        label="E-postadress"
        type="email"
        :valid="valid"
        invalid-message="Ange en giltig e-postadress"
        @input="validateEmail(email)"
      />
    `,
  }),
}

export const Disabled: Story = {
  render: (args: Story['args']) => ({
    components: { FdsInput },
    setup: () => ({ args }),
    template: '<FdsInput v-bind="args" />',
  }),
  args: {
    label: 'Inaktiverat fält',
    value: 'Detta värde kan inte ändras',
    disabled: true,
  },
}

export const Required: Story = {
  render: (args: Story['args']) => ({
    components: { FdsInput },
    setup: () => ({ args }),
    template: '<FdsInput v-bind="args" />',
  }),
  args: {
    label: 'Obligatoriskt fält',
    required: true,
    invalidMessage: 'Detta fält är obligatoriskt',
  },
}

export const WithLabelLeft: Story = {
  render: (args: Story['args']) => ({
    components: { FdsInput },
    setup: () => ({ args }),
    template: '<FdsInput v-bind="args" />',
  }),
  args: {
    label: 'Label till vänster',
    labelLeft: true,
    meta: 'Meta-text visas här',
  },
}

export const Password: Story = {
  render: () => ({
    components: { FdsInput },
    setup() {
      const password = ref('')
      return { password }
    },
    template: `
      <FdsInput
        v-model="password"
        label="Lösenord"
        type="password"
        meta="Minst 8 tecken"
      />
    `,
  }),
}

export const Search: Story = {
  render: () => ({
    components: { FdsInput },
    setup() {
      const searchTerm = ref('')
      return { searchTerm }
    },
    template: `
      <FdsInput
        v-model="searchTerm"
        label="Sök"
        type="search"
        clearButton
        placeholder="Sök efter..."
      />
    `,
  }),
}

export const DateWithTodayDisplay: Story = {
  render: () => ({
    components: { FdsInput },
    setup() {
      const today = new Date().toISOString().slice(0, 10)
      const date = ref(today)
      return { date, today }
    },
    template: `
      <div>
        <FdsInput
          v-model="date"
          label="Datum"
          type="date"
        />
      </div>
    `,
  }),
}

export const WithMask: Story = {
  render: () => ({
    components: { FdsInput },
    setup() {
      const personnummer = ref('')
      return { personnummer }
    },
    template: `
      <div>
        <FdsInput
          v-model="personnummer"
          label="Personnummer"
          mask="00000000-0000"
          :maskOptions="{ lazy: true }"
          meta="Format: yyyymmdd-nnnn"
        />
        <p class="mt-4">Värde: {{ personnummer }}</p>
      </div>
    `,
  }),
}

export const WithMaskPhone: Story = {
  render: () => ({
    components: { FdsInput },
    setup() {
      const phone = ref('')
      return { phone }
    },
    template: `
      <div>
        <FdsInput
          v-model="phone"
          label="Telefonnummer"
          mask="+46 (000) 000-00-00"
          :maskOptions="{ lazy: true }"
        />
        <p class="mt-4">Värde: {{ phone }}</p>
      </div>
    `,
  }),
}

export const WithMaskPostalCode: Story = {
  render: () => ({
    components: { FdsInput },
    setup() {
      const postalCode = ref('')
      return { postalCode }
    },
    template: `
      <div>
        <FdsInput
          v-model="postalCode"
          label="Postnummer"
          mask="000 00"
        />
        <p class="mt-4">Värde: {{ postalCode }}</p>
      </div>
    `,
  }),
}

export const AllStates: Story = {
  render: () => ({
    components: { FdsInput },
    setup: () => ({}),
    template: `
      <div class="space-y-6">
        <FdsInput label="Neutral" value="Neutralt tillstånd" />
        <FdsInput label="Valid" value="Giltigt värde" :valid="true" />
        <FdsInput label="Invalid" value="Ogiltigt värde" :valid="false" invalid-message="Detta är ett felmeddelande" />
        <FdsInput label="Disabled" value="Inaktiverat" disabled />
        <FdsInput label="Required" required invalid-message="Detta fält är obligatoriskt" />
      </div>
    `,
  }),
}