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

const meta = {
  component: TitanSelectContainer,
  title: 'UI/TitanSelectContainer',
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['inline', 'icon', 'stacked'],
      description: 'Visual variant of the select component'
    },
    multiple: {
      control: 'boolean',
      description: 'Allow multiple selections'
    },
    allowCustom: {
      control: 'boolean',
      description: 'Allow custom value input'
    },
    customInputVariant: {
      control: 'select',
      options: ['input', 'textarea'],
      description: 'Custom input variant - single-line input or multi-line textarea'
    },
    disabled: {
      control: 'boolean',
      description: 'Disable the entire select'
    },
    error: {
      control: 'boolean',
      description: 'Show error state'
    },
    label: {
      control: 'text',
      description: 'Label text displayed above select'
    },
    showCheckmark: {
      control: 'boolean',
      description: 'Show checkmark on selected items'
    }
  }
} satisfies Meta<typeof TitanSelectContainer>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default inline variant with string array options
 */
export const InlineDefault: Story = {
  render: (args) => ({
    components: { TitanSelectContainer },
    setup() {
      const selected = ref('')
      return { args, selected }
    },
    template: `
      <TitanSelectContainer
        v-bind="args"
        v-model="selected"
      />
      <p class="mt-4 text-sm text-gray-600">Selected: {{ selected }}</p>
    `
  }),
  args: {
    options: ['Option 1', 'Option 2', 'Option 3'],
    variant: 'inline',
    label: 'SELECT AN OPTION'
  }
}

/**
 * Inline variant with multiple selection
 */
export const InlineMultiple: Story = {
  render: (args) => ({
    components: { TitanSelectContainer },
    setup() {
      const selected = ref([])
      return { args, selected }
    },
    template: `
      <TitanSelectContainer
        v-bind="args"
        v-model="selected"
      />
      <p class="mt-4 text-sm text-gray-600">Selected: {{ selected.join(', ') }}</p>
    `
  }),
  args: {
    options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
    variant: 'inline',
    multiple: true,
    label: 'SELECT ALL THAT APPLY',
    showCheckmark: true
  }
}

/**
 * Inline variant with custom value support (default single-line input)
 */
export const InlineWithCustom: Story = {
  render: (args) => ({
    components: { TitanSelectContainer },
    setup() {
      const selected = ref([])
      return { args, selected }
    },
    template: `
      <TitanSelectContainer
        v-bind="args"
        v-model="selected"
      />
      <p class="mt-4 text-sm text-gray-600">Selected: {{ selected.join(', ') }}</p>
    `
  }),
  args: {
    options: ['Flowers', 'Donation', 'Memorial', 'Other'],
    variant: 'inline',
    multiple: true,
    allowCustom: true,
    label: 'SELECT MEMORIALIZATION OPTIONS'
  }
}

/**
 * Inline variant with custom textarea input for multi-line entries
 */
export const InlineWithCustomTextarea: Story = {
  render: (args) => ({
    components: { TitanSelectContainer },
    setup() {
      const selected = ref([])
      return { args, selected }
    },
    template: `
      <TitanSelectContainer
        v-bind="args"
        v-model="selected"
      />
      <p class="mt-4 text-sm text-gray-600">Selected: {{ selected.join(', ') }}</p>
    `
  }),
  args: {
    options: ['Flowers', 'Donation', 'Memorial', 'Other'],
    variant: 'inline',
    multiple: true,
    allowCustom: true,
    customInputVariant: 'textarea',
    label: 'SELECT MEMORIALIZATION OPTIONS'
  }
}

/**
 * Icon variant with icon slots
 */
export const IconVariant: Story = {
  render: (args) => ({
    components: { TitanSelectContainer },
    setup() {
      const selected = ref('')
      return { args, selected }
    },
    template: `
      <TitanSelectContainer
        v-bind="args"
        v-model="selected"
      >
        <template #icon-buried>🪦</template>
        <template #icon-cremated>⚱️</template>
        <template #icon-other>🔥</template>
      </TitanSelectContainer>
      <p class="mt-4 text-sm text-gray-600">Selected: {{ selected }}</p>
    `
  }),
  args: {
    options: [
      { value: 'buried', label: 'Buried' },
      { value: 'cremated', label: 'Cremated' },
      { value: 'other', label: 'Other' }
    ],
    variant: 'icon',
    label: 'CHOOSE A DISPOSITION'
  }
}

/**
 * Stacked variant with title and description
 */
export const StackedVariant: Story = {
  render: (args) => ({
    components: { TitanSelectContainer },
    setup() {
      const selected = ref('')
      return { args, selected }
    },
    template: `
      <TitanSelectContainer
        v-bind="args"
        v-model="selected"
      />
      <p class="mt-4 text-sm text-gray-600">Selected: {{ selected }}</p>
    `
  }),
  args: {
    options: [
      {
        value: 'traditional-religious',
        label: 'traditional-religious',
        title: 'Traditional religious service',
        description: 'A religious ceremony at a place of worship.'
      },
      {
        value: 'traditional-secular',
        label: 'traditional-secular',
        title: 'Traditional secular service',
        description: 'A ceremony at a funeral home or other location.'
      },
      {
        value: 'celebration-of-life',
        label: 'celebration-of-life',
        title: 'Celebration of life',
        description: 'A personalized gathering focused on celebrating the life lived.'
      }
    ],
    variant: 'stacked',
    label: 'WITH A:'
  }
}

/**
 * Stacked variant in multi-select mode with checkbox indicators.
 * Each card displays a square checkbox on the left that shows a purple checkmark when selected.
 */
export const StackedMultiple: Story = {
  render: (args) => ({
    components: { TitanSelectContainer },
    setup() {
      const selected = ref<string[]>([])
      return { args, selected }
    },
    template: `
      <TitanSelectContainer
        v-bind="args"
        v-model="selected"
      />
      <p class="mt-4 text-sm text-gray-600">Selected: {{ selected.join(', ') }}</p>
    `
  }),
  args: {
    options: [
      {
        value: 'visitation',
        label: 'visitation',
        title: 'Visitation or viewing',
        description: 'Time for friends and family to gather ahead of the service.'
      },
      {
        value: 'service',
        label: 'service',
        title: 'Memorial service',
        description: 'A personalized gathering focused on celebrating the life lived.'
      },
      {
        value: 'reception',
        label: 'reception',
        title: 'Reception or repast',
        description: 'Food and drinks following the service to connect with loved ones.'
      }
    ],
    variant: 'stacked',
    multiple: true,
    label: 'SELECT ALL THAT APPLY'
  }
}

/**
 * Stacked multi-select with pre-selected values demonstrating both checkbox states.
 * Shows the visual difference between selected (white checkbox with purple checkmark)
 * and unselected (empty checkbox with green border) options.
 */
export const StackedMultipleWithSelection: Story = {
  render: (args) => ({
    components: { TitanSelectContainer },
    setup() {
      const selected = ref<string[]>(['visitation', 'reception'])
      return { args, selected }
    },
    template: `
      <TitanSelectContainer
        v-bind="args"
        v-model="selected"
      />
      <p class="mt-4 text-sm text-gray-600">Selected: {{ selected.join(', ') }}</p>
    `
  }),
  args: {
    options: [
      {
        value: 'visitation',
        label: 'visitation',
        title: 'Visitation or viewing',
        description: 'Time for friends and family to gather ahead of the service.'
      },
      {
        value: 'service',
        label: 'service',
        title: 'Memorial service',
        description: 'A personalized gathering focused on celebrating the life lived.'
      },
      {
        value: 'reception',
        label: 'reception',
        title: 'Reception or repast',
        description: 'Food and drinks following the service to connect with loved ones.'
      }
    ],
    variant: 'stacked',
    multiple: true,
    label: 'SELECT ALL THAT APPLY'
  }
}

/**
 * Stacked variant with custom textarea input for multi-line custom entries
 */
export const StackedWithCustomTextarea: Story = {
  render: (args) => ({
    components: { TitanSelectContainer },
    setup() {
      const selected = ref<string[]>([])
      return { args, selected }
    },
    template: `
      <TitanSelectContainer
        v-bind="args"
        v-model="selected"
      />
      <p class="mt-4 text-sm text-gray-600">Selected: {{ selected.join(', ') }}</p>
    `
  }),
  args: {
    options: [
      {
        value: 'visitation',
        label: 'visitation',
        title: 'Visitation or viewing',
        description: 'Time for friends and family to gather ahead of the service.'
      },
      {
        value: 'service',
        label: 'service',
        title: 'Memorial service',
        description: 'A personalized gathering focused on celebrating the life lived.'
      },
      {
        value: 'other',
        label: 'other',
        title: 'Other',
        description: 'Add a custom service type.'
      }
    ],
    variant: 'stacked',
    multiple: true,
    allowCustom: true,
    customInputVariant: 'textarea',
    label: 'SELECT SERVICE TYPES'
  }
}

/**
 * Disabled state
 */
export const Disabled: Story = {
  args: {
    options: ['Option 1', 'Option 2', 'Option 3'],
    variant: 'inline',
    disabled: true,
    label: 'DISABLED SELECT'
  }
}

/**
 * Error state
 */
export const ErrorState: Story = {
  args: {
    options: ['Option 1', 'Option 2', 'Option 3'],
    variant: 'inline',
    error: true,
    errorMessage: 'Please select at least one option',
    label: 'SELECT AN OPTION'
  }
}

/**
 * Interactive playground
 */
export const Playground: Story = {
  render: (args) => ({
    components: { TitanSelectContainer },
    setup() {
      const selected = ref(args.multiple ? [] : '')
      return { args, selected }
    },
    template: `
      <TitanSelectContainer
        v-bind="args"
        v-model="selected"
      >
        <template #icon-buried>🪦</template>
        <template #icon-cremated>⚱️</template>
      </TitanSelectContainer>
      <p class="mt-4 text-sm text-gray-600">Selected: {{ selected }}</p>
    `
  }),
  args: {
    options: ['Option 1', 'Option 2', 'Option 3'],
    variant: 'inline',
    multiple: false,
    allowCustom: false,
    disabled: false,
    error: false,
    showCheckmark: false,
    label: 'SELECT OPTIONS'
  }
}