import type { Meta, StoryObj } from '@storybook/vue3'
import { computed, ref } from 'vue'
import icons from '../../assets/icons'
import FdsIcon from './FdsIcon.vue'
import type { FdsIconName } from './types'

const meta: Meta<typeof FdsIcon> = {
  title: 'FDS/FdsIcon',
  component: FdsIcon,
  tags: ['autodocs'],
  parameters: {},
  argTypes: {
    name: { control: { type: 'select' }, options: Object.keys(icons) },
    size: { control: { type: 'text' } },
    title: { control: { type: 'text' } },
  },
  args: {
    name: (Object.keys(icons)[0] || '') as FdsIconName,
    size: 24,
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Basic: Story = {
  render: (args: Story['args']) => ({
    components: { FdsIcon },
    setup: () => ({ args }),
    template: '<FdsIcon v-bind="args" />',
  }),
}

export const IconGallery: Story = {
  parameters: {},
  render: (args: { name?: string; size?: number | string; title?: string }) => ({
    components: { FdsIcon },
    setup() {
      const iconEntries = ref(Object.keys(icons))
      const selectedName = ref(args.name || iconEntries.value[0] || '')
      function onPick(n: string) {
        selectedName.value = n
      }
      const codeSnippet = computed(() => `<FdsIcon name="${selectedName.value}" size="${args.size}" />`)
      return { args, iconEntries, onPick, codeSnippet, selectedName }
    },
    template: `
      <div>
        <div class="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-10 gap-4">
          <button
            v-for="n in iconEntries"
            :key="n"
            type="button"
            class="flex flex-col items-center gap-2 p-3 rounded border hover:bg-blue-100 focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500"
            @click="onPick(n)"
            :aria-label="'Välj ikon ' + n"
          >
            <FdsIcon :name="n" :size="28" />
            <span class="text-[11px] text-gray-700 truncate max-w-[90px]">{{ n }}</span>
          </button>
        </div>
        <div class="mt-4 text-sm">Vald ikon: <code class="px-1 py-0.5 bg-gray-100 rounded">{{ selectedName }}</code></div>
        <div class="mt-2">
          <FdsIcon :name="selectedName" :size="args.size" :title="args.title" />
        </div>
      </div>
    `,
  }),
}