import type { Meta, StoryObj } from '@storybook/vue3-vite';
import type { Component } from 'vue';
import * as Icons from '@mozaic-ds/icons-vue';
import {
  Release32,
  CheckCircleFilled20,
  CheckCircleFilled24,
  CheckCircleFilled32,
  CheckCircleFilled48,
  CheckCircleFilled64,
} from '@mozaic-ds/icons-vue';

const meta: Meta = {
  title: 'Foundations/Icon',
  component: Release32,
  parameters: {
    docs: {
      description: {
        component:
          'Icons are compact visual elements used to represent actions, objects, or concepts in a clear and recognizable way. They can be used as standalone components or paired with other UI elements to enhance meaning and usability. Their style, size, and emphasis depend on the function they communicate and the context in which they appear.',
      },
    },
  },
  tags: ['v2'],
  argTypes: {
    color: {
      description: 'customize the color of the SVG.',
      control: 'select',
      options: [
        undefined,
        'var(--color-icon-primary)',
        'var(--color-icon-secondary)',
        'var(--color-icon-tertiary)',
        'var(--color-icon-primary-inverse)',
        'var(--color-icon-secondary-inverse)',
        'var(--color-icon-accent)',
        'var(--color-icon-disabled)',
      ],
      table: {
        category: 'Properties',
        type: { summary: 'string' },
      },
    },
  },
  render: (args) => ({
    components: Icons,
    setup() {
      return { args };
    },
    template: `
      <Release32 v-bind="args"/>
    `,
  }),
};

export default meta;
type Story = StoryObj;

export const Default: Story = {};

export const Size: Story = {
  parameters: {
    docs: {
      source: {
        code: `
          <template>
            <CheckCircleFilled20 />
            <CheckCircleFilled24 />
            <CheckCircleFilled32 />
            <CheckCircleFilled48 />
            <CheckCircleFilled64 />
          </template>
        `,
      },
    },
  },
  render: (args) => ({
    components: {
      CheckCircleFilled20,
      CheckCircleFilled24,
      CheckCircleFilled32,
      CheckCircleFilled48,
      CheckCircleFilled64,
    },
    setup() {
      return { args };
    },
    template: `
      <CheckCircleFilled20/>
      <CheckCircleFilled24/>
      <CheckCircleFilled32/>
      <CheckCircleFilled48/>
      <CheckCircleFilled64/>
    `,
  }),
};

export const Color: Story = {
  args: {
    color: 'var(--color-icon-accent)',
  },
};

export const IconList: Story = {
  parameters: {
    docs: {
      canvas: {
        sourceState: 'hidden',
      },
    },
  },
  render: () => ({
    components: Icons,
    setup() {
      const icons32: Record<string, Component> = Object.fromEntries(
        Object.entries(Icons).filter(([name]) => name.endsWith('32')),
      );

      return { icons32 };
    },
    template: `
      <div class="icon-grid">
        <div
          v-for="(Icon, name) in icons32"
          :key="name"
          class="icon-item"
        >
          <component :is="Icon" width="32" height="32" />
          <div class="icon-label"><{{ name }}/></div>
        </div>
      </div>
    `,
  }),
};