import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'

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

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

const selectableAppearances = ['primary', 'secondary', 'tertiary', 'quaternary', 'inverse'] as const
const selectableSizes = ['3xs', '2xs', 'xs', 'sm', 'md'] as const

const meta = {
  title: 'Atoms/CpSelectableButton',
  component: CpSelectableButton,
  argTypes: {
    appearance: {
      control: 'select',
      options: selectableAppearances,
      description: 'Visual style of the selectable button',
    },
    isSelected: {
      control: 'boolean',
      description: 'Whether the button is selected',
    },
    isExpanded: {
      control: 'boolean',
      description: 'Whether the button is expanded',
    },
    size: {
      control: 'select',
      options: selectableSizes,
      description: 'Size of the button',
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the button is disabled',
    },
    label: {
      control: 'text',
      description: 'Text displayed inside the button',
    },
  },
} satisfies Meta<typeof CpSelectableButton>

export default meta
type Story = StoryObj<typeof meta>

const defaultRender = (args: Args) => ({
  components: { CpSelectableButton },
  setup() {
    return { args }
  },
  template: `
    <div style="display: flex; justify-content: center; align-items: center; min-height: 120px; min-width: 240px;">
      <CpSelectableButton v-bind="args" />
    </div>
  `,
})

/**
 * Default selectable button. Use the controls to experiment with each prop
 * in isolation.
 */
export const Default: Story = {
  args: {
    appearance: 'primary',
    size: 'md',
    disabled: false,
    label: 'Label',
    isSelected: false,
    isExpanded: false,
  },
  render: defaultRender,
}

/* -------------------------------------------------------------------------- */
/* Appearances                                                                */
/* -------------------------------------------------------------------------- */

/**
 * Every appearance rendered side by side. The `inverse` appearance is meant
 * for dark backgrounds.
 */
export const Appearances: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpSelectableButton },
    setup() {
      return { selectableAppearances, docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div
          v-for="appearance in selectableAppearances"
          :key="appearance"
          :style="[docCellStyle, appearance === 'inverse' ? 'background: #111; color: #fff; padding: 16px; border-radius: 8px;' : '']"
        >
          <span :style="[docLabelStyle, appearance === 'inverse' ? 'color: #e5e7eb;' : '']">{{ appearance }}</span>
          <CpSelectableButton :appearance="appearance" label="Label" />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Sizes                                                                      */
/* -------------------------------------------------------------------------- */

/**
 * All sizes rendered side by side, from `3xs` to `md`.
 */
export const Sizes: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpSelectableButton },
    setup() {
      return { selectableSizes, docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div v-for="size in selectableSizes" :key="size" :style="docCellStyle">
          <span :style="docLabelStyle">{{ size }}</span>
          <CpSelectableButton appearance="primary" :size="size" label="Label" />
        </div>
      </div>
    `,
  }),
}

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

/**
 * The three selection states: default, `isExpanded` and `isSelected`.
 */
export const States: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpSelectableButton },
    setup() {
      return { docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Default</span>
          <CpSelectableButton appearance="primary" label="Label" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Expanded</span>
          <CpSelectableButton appearance="primary" label="Label" :is-expanded="true" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Selected</span>
          <CpSelectableButton appearance="primary" label="Label" :is-selected="true" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Disabled</span>
          <CpSelectableButton appearance="primary" label="Label" :disabled="true" />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Icons                                                                      */
/* -------------------------------------------------------------------------- */

/**
 * Slot `#leading-icon` and `#trailing-icon` accept any icon component.
 */
export const WithIcons: Story = {
  args: {
    appearance: 'primary',
    size: 'md',
  },
  render: (args: Args) => ({
    components: { CpSelectableButton },
    setup() {
      return { args }
    },
    template: `
      <CpSelectableButton v-bind="args">
        <template #leading-icon>
          <CpIcon type="circle" />
        </template>
        Custom label
        <template #trailing-icon>
          <CpIcon type="circle" />
        </template>
      </CpSelectableButton>
    `,
  }),
}

/**
 * Stretch the button to fill its container by setting `width: 100%`.
 */
export const FullWidth: Story = {
  args: {
    appearance: 'secondary',
    size: 'md',
    label: 'Label',
    isSelected: true,
  },
  render: (args: Args) => ({
    components: { CpSelectableButton },
    setup() {
      return { args }
    },
    template: `
      <div style="width: 500px;">
        <CpSelectableButton style="width: 100%;" v-bind="args">
          <template #leading-icon>
            <CpIcon type="circle" />
          </template>
          <template #trailing-icon>
            <CpIcon type="circle" />
          </template>
        </CpSelectableButton>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Icon only                                                                  */
/* -------------------------------------------------------------------------- */
export const IconOnly: Story = {
  args: {
    appearance: 'primary',
    size: 'md',
  },
  render: (args: Args) => ({
    components: { CpSelectableButton },
    setup() {
      return { args }
    },
    template: `
      <CpSelectableButton v-bind="args">
        <template #leading-icon><CpIcon type="circle" /></template>
      </CpSelectableButton>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Matrix                                                                     */
/* -------------------------------------------------------------------------- */

/**
 * Full appearance × size matrix, each cell showing default / expanded /
 * selected side by side. Useful for visual regression.
 */
export const Matrix: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpSelectableButton },
    setup() {
      return { selectableAppearances, selectableSizes }
    },
    template: `
      <div>
        <div
          v-for="appearance in selectableAppearances"
          :key="appearance"
          :style="['display: flex; flex-direction: row; gap: 48px; align-items: center; padding: 48px', appearance === 'inverse' ? 'background-color: black; color: white;' : '']"
        >
          <p style="min-width: 80px; margin: 0;">{{ appearance }}</p>
          <div
            v-for="size in selectableSizes"
            :key="size"
            style="display: flex; justify-content: center; align-items: center; gap: 8px;"
          >
            <p style="margin: 0;">{{ size }}</p>
            <CpSelectableButton :appearance="appearance" :size="size" label="Label">
              <template #leading-icon><CpIcon type="circle" /></template>
              <template #trailing-icon><CpIcon type="circle" /></template>
            </CpSelectableButton>
            <CpSelectableButton :appearance="appearance" :size="size" label="Label" :is-expanded="true">
              <template #leading-icon><CpIcon type="circle" /></template>
              <template #trailing-icon><CpIcon type="circle" /></template>
            </CpSelectableButton>
            <CpSelectableButton :appearance="appearance" :size="size" label="Label" :is-selected="true">
              <template #leading-icon><CpIcon type="circle" /></template>
              <template #trailing-icon><CpIcon type="circle" /></template>
            </CpSelectableButton>
          </div>
        </div>
      </div>
    `,
  }),
}