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

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

import { CustomCpIcons } from '@/constants'
import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
import { copyableClass, copyableCopiedClass, useCopier } from '@/stories/tokenUtils'

const iconsOptions = [
  ...Object.keys(CustomCpIcons),
  'activity',
  'alert-circle',
  'arrow-down',
  'arrow-left',
  'arrow-right',
  'arrow-up',
  'bell',
  'calendar',
  'check',
  'check-circle',
  'chevron-down',
  'chevron-left',
  'chevron-right',
  'chevron-up',
  'edit',
  'home',
  'search',
  'settings',
  'user',
  'x',
  'invalid-icon-name',
].sort()

const iconSizes = [16, 24, 32, 48] as const

const meta = {
  title: 'Foundations/CpIcon',
  component: CpIcon,
  tags: ['!dev'],
  argTypes: {
    type: {
      control: 'select',
      options: iconsOptions,
      description: 'Type of icon to display',
    },
    size: {
      control: 'number',
      description: 'Size of the icon in pixels',
    },
    tag: {
      control: 'text',
      description: 'HTML tag to use for the icon wrapper',
    },
  },
} satisfies Meta<typeof CpIcon>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default icon. Use the controls to experiment with each prop in isolation.
 */
export const Default: Story = {
  args: {
    type: 'check',
    size: 24,
    tag: 'i',
  },
  render: (args: Args) => ({
    components: { CpIcon },
    setup() {
      return { args }
    },
    template: `
      <div style="padding: 20px;">
        <CpIcon v-bind="args" />
      </div>
    `,
  }),
}

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

/**
 * The icon scales freely through the `size` prop (pixel value). Below are
 * the most common sizes used across the design system.
 */
export const Sizes: Story = {
  args: { type: 'check' },
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpIcon },
    setup() {
      return { iconSizes, docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div v-for="size in iconSizes" :key="size" :style="docCellStyle">
          <span :style="docLabelStyle">{{ size }}px</span>
          <CpIcon type="check" :size="size" />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Catalog                                                                    */
/* -------------------------------------------------------------------------- */

/**
 * Every available icon rendered on a neutral surface. Hover a cell to see
 * the icon name.
 */
export const AllIcons: Story = {
  args: { type: 'check' },
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpIcon },
    setup() {
      const { copiedKey, copy } = useCopier()
      return {
        icons: iconsOptions,
        copiedKey,
        copy,
        copyClass: copyableClass,
        copiedClass: copyableCopiedClass,
      }
    },
    template: `
      <div style="padding: 20px; display: grid; grid-template-columns: repeat(4, minmax(100px, 3fr)); gap: 16px;">
        <div
          v-for="icon in icons"
          :key="icon"
          style="display: flex; flex-direction: column; align-items: center; border: 1px solid #eee; border-radius: 4px;"
        >
          <span
            style="font-size: 12px; padding: 8px; word-break: break-word;"
            :class="[copyClass, copiedKey === icon ? copiedClass : '']"
            role="button"
            tabindex="0"
            :title="'Click to copy ' + icon"
            @click="copy(icon)"
            @keydown.enter.prevent="copy(icon)"
            @keydown.space.prevent="copy(icon)"
          >{{ copiedKey === icon ? 'Copied!' : icon }}</span>
          <hr style="width: 100%; background-color: #eee; height: 1px; border: 0;" />
          <div style="padding: 20px;">
            <CpIcon :type="icon" />
          </div>
        </div>
      </div>
    `,
  }),
}

/**
 * Same catalog rendered on a colored surface to verify that icons inherit
 * the current text color.
 */
export const AllIconsColored: Story = {
  args: { type: 'check' },
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpIcon },
    setup() {
      const { copiedKey, copy } = useCopier()
      return {
        icons: iconsOptions,
        copiedKey,
        copy,
        copyClass: copyableClass,
        copiedClass: copyableCopiedClass,
      }
    },
    template: `
      <div style="padding: 20px; display: grid; grid-template-columns: repeat(4, minmax(100px, 3fr)); gap: 16px;">
        <div
          v-for="icon in icons"
          :key="icon"
          style="display: flex; flex-direction: column; align-items: center; border: 1px solid #eee; border-radius: 4px;"
        >
          <span
            style="font-size: 12px; padding: 8px; word-break: break-word;"
            :class="[copyClass, copiedKey === icon ? copiedClass : '']"
            role="button"
            tabindex="0"
            :title="'Click to copy ' + icon"
            @click="copy(icon)"
            @keydown.enter.prevent="copy(icon)"
            @keydown.space.prevent="copy(icon)"
          >{{ copiedKey === icon ? 'Copied!' : icon }}</span>
          <hr style="width: 100%; background-color: #eee; height: 1px; border: 0;" />
          <div
            style="padding: 20px; color: green; background-color: #f0fdf4; width: 100%; display: flex; align-items: center; justify-content: center; height: 100%;"
          >
            <CpIcon :type="icon" />
          </div>
        </div>
      </div>
    `,
  }),
}