import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { computed, ref } from 'vue'

import CpCheckbox from '@/components/CpCheckbox.vue'

import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'

const checkboxColors = ['accent', 'blue'] as const

const meta = {
  title: 'Atoms/CpCheckbox',
  component: CpCheckbox,
  argTypes: {
    modelValue: {
      control: 'boolean',
      description: 'The checkbox value',
    },
    checkboxValue: {
      control: 'text',
      description: 'Value when used in a group',
    },
    checkboxLabel: {
      control: 'text',
      description: 'Label text for the checkbox',
    },
    isDisabled: {
      control: 'boolean',
      description: 'Whether the checkbox is disabled',
    },
    groupName: {
      control: 'text',
      description: 'Name attribute for checkbox group',
    },
    color: {
      control: 'select',
      options: checkboxColors,
      description: 'Color variant of the checkbox',
    },
    reverseLabel: {
      control: 'boolean',
      description: 'Whether to show label before the checkbox',
    },
    autofocus: {
      control: 'boolean',
      description: 'Whether to autofocus the checkbox',
    },
    helper: {
      control: 'text',
      description: 'Helper text to display below the label',
    },
    indeterminate: {
      control: 'boolean',
      description: 'Whether the checkbox is in an indeterminate state',
    },
    size: {
      control: 'select',
      options: ['md', 'lg'],
      description: 'Size variant of the checkbox',
    },
  },
} satisfies Meta<typeof CpCheckbox>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default checkbox. Use the controls to experiment with each prop in isolation.
 */
export const Default: Story = {
  args: {
    checkboxLabel: 'checkbox label',
    modelValue: false,
    isDisabled: false,
    color: 'accent',
    reverseLabel: false,
    autofocus: false,
    helper: '',
    indeterminate: false,
  },
  render: (args) => ({
    components: { CpCheckbox },
    setup() {
      const value = ref(args.modelValue)
      return { args, value }
    },
    template: `
      <div style="padding: 20px;">
        <CpCheckbox v-model="value" v-bind="args" />
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* States                                                                     */
/* -------------------------------------------------------------------------- */

/**
 * Every state available for the checkbox, compared side by side.
 */
export const States: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpCheckbox },
    setup() {
      return { docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Unchecked</span>
          <CpCheckbox :model-value="false" checkbox-label="Label" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Checked</span>
          <CpCheckbox :model-value="true" checkbox-label="Label" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Indeterminate</span>
          <CpCheckbox :model-value="false" :indeterminate="true" checkbox-label="Label" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Disabled</span>
          <CpCheckbox :model-value="false" :is-disabled="true" checkbox-label="Label" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Disabled checked</span>
          <CpCheckbox :model-value="true" :is-disabled="true" checkbox-label="Label" />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Colors                                                                     */
/* -------------------------------------------------------------------------- */

/**
 * Color variants rendered side by side.
 */
export const Colors: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpCheckbox },
    setup() {
      return { checkboxColors, docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div v-for="color in checkboxColors" :key="color" :style="docCellStyle">
          <span :style="docLabelStyle">{{ color }}</span>
          <CpCheckbox :model-value="true" :color="color" checkbox-label="Label" />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Variants                                                                   */
/* -------------------------------------------------------------------------- */

/**
 * Add a helper text below the label.
 */
export const WithHelper: Story = {
  args: {
    ...Default.args,
    helper: 'This is a helper text that provides additional information',
  },
}

/**
 * Display the label before the checkbox using `reverseLabel`.
 */
export const Reversed: Story = {
  args: {
    ...Default.args,
    reverseLabel: true,
  },
}

/* -------------------------------------------------------------------------- */
/* Group patterns                                                             */
/* -------------------------------------------------------------------------- */

/**
 * Parent-child checkbox pattern using the `indeterminate` state to represent
 * a partial selection.
 */
export const ParentChildGroup: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpCheckbox },
    setup() {
      const childOptions = ref([
        { id: 'email', label: 'Email notifications', checked: false },
        { id: 'push', label: 'Push notifications', checked: true },
        { id: 'sms', label: 'SMS notifications', checked: false },
      ])

      const parentState = computed(() => {
        const checkedCount = childOptions.value.filter((option) => option.checked).length
        const totalCount = childOptions.value.length

        if (checkedCount === 0) return { checked: false, indeterminate: false }
        if (checkedCount === totalCount) return { checked: true, indeterminate: false }
        return { checked: false, indeterminate: true }
      })

      const handleParentChange = (value: boolean) => childOptions.value.forEach((option) => (option.checked = value))

      const handleChildChange = (childId: string) => {
        const child = childOptions.value.find((option) => option.id === childId)
        if (child) {
          child.checked = !child.checked
        }
      }

      return {
        childOptions,
        parentState,
        handleParentChange,
        handleChildChange,
      }
    },
    template: `
      <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
        <div style="font-size: 16px; font-weight: 600; margin-bottom: 8px;">
          Parent-Child Checkbox Example
        </div>
        <CpCheckbox
          :model-value="parentState.checked"
          :indeterminate="parentState.indeterminate"
          checkbox-label="All notifications"
          @update:model-value="handleParentChange"
          style="font-weight: 500; border-bottom: 1px solid #e0e0e0; padding-bottom: 12px;"
        />
        <div style="margin-left: 24px; display: flex; flex-direction: column; gap: 8px;">
          <CpCheckbox
            v-for="option in childOptions"
            :key="option.id"
            :model-value="option.checked"
            :checkbox-label="option.label"
            @update:model-value="() => handleChildChange(option.id)"
          />
        </div>
        <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 4px; font-size: 14px;">
          <strong>Current state: </strong>
          <span v-if="parentState.indeterminate" style="color: #ff9800;">Indeterminate (some selected)</span>
          <span v-else-if="parentState.checked" style="color: #4caf50;">All selected</span>
          <span v-else style="color: #757575;">None selected</span>
        </div>
      </div>
    `,
  }),
}

/**
 * Multiple checkboxes bound to the same v-model array act as a group.
 */
export const CheckboxGroup: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpCheckbox },
    setup() {
      const selectedValues = ref(['option1'])
      return { selectedValues }
    },
    template: `
      <div style="padding: 20px; display: flex; flex-direction: column; gap: 12px;">
        <CpCheckbox
          v-model="selectedValues"
          checkbox-value="option1"
          checkbox-label="Option 1"
          group-name="group1"
        />
        <CpCheckbox
          v-model="selectedValues"
          checkbox-value="option2"
          checkbox-label="Option 2"
          group-name="group1"
        />
        <CpCheckbox
          v-model="selectedValues"
          checkbox-value="option3"
          checkbox-label="Option 3"
          group-name="group1"
        />
      </div>
    `,
  }),
}

/**
 * Replace the label with custom content using the default slot.
 */
export const CustomContent: Story = {
  args: {
    ...Default.args,
    checkboxLabel: '',
  },
  render: (args) => ({
    components: { CpCheckbox },
    setup() {
      const value = ref(args.modelValue)
      return { args, value }
    },
    template: `
      <div style="padding: 20px;">
        <CpCheckbox v-model="value" v-bind="args">
          <div style="display: flex; flex-direction: column; gap: 4px;">
            <span style="font-weight: 500;">Custom Content</span>
            <span style="font-size: 14px; color: #666;">With multiple lines and styling</span>
          </div>
        </CpCheckbox>
      </div>
    `,
  }),
}