import { html, unsafeStatic } from 'lit/static-html.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import * as Icons from '@mozaic-ds/icons-svelte/components/index.js';
import '@mozaic-ds/icons-svelte/components/index.js';
const meta = {
    title: 'Foundations/Icon',
    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: {
        id: {
            description: 'A unique identifier for the icon element.',
            control: 'text',
            table: {
                category: 'Properties',
                type: { summary: 'string' },
            },
        },
        style: {
            description: 'Inline CSS styles added on the svg element.',
            control: 'text',
            table: {
                category: 'Properties',
                type: { summary: 'string' },
            },
        },
        className: {
            description: 'CSS class names to pass to the svg element.',
            control: 'text',
            table: {
                category: 'Properties',
                type: { summary: 'string' },
            },
        },
        fill: {
            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) => html `
    <release-32
      id=${ifDefined(args.id)}
      style=${ifDefined(args.style)}
      className=${ifDefined(args.className)}
      fill=${ifDefined(args.fill)}
    ></release-32>
  `,
};
export default meta;
export const Default = {};
export const Size = {
    render: () => html `
    <check-circle-filled-20></check-circle-filled-20>
    <check-circle-filled-24></check-circle-filled-24>
    <check-circle-filled-32></check-circle-filled-32>
    <check-circle-filled-48></check-circle-filled-48>
    <check-circle-filled-64></check-circle-filled-64>
  `,
};
export const Color = {
    args: {
        fill: 'var(--color-icon-accent)',
    },
};
export const IconList = {
    parameters: {
        docs: {
            canvas: { sourceState: 'hidden' },
        },
    },
    render: () => {
        const iconEntries = Object.entries(Icons).filter(([name]) => name.endsWith('32'));
        return html `
      <style>
        .icon-grid {
          display: flex;
          flex-wrap: wrap;
          gap: 1rem;
          align-items: center;
          text-align: center;
        }

        .icon-item {
          display: flex;
          min-width: 10rem;
          flex-direction: column;
          align-items: center;
          font-size: 14px;
          color: #555;
          margin-bottom: 2rem;
        }

        .icon-label {
          margin-top: 0.5rem;
        }
      </style>

      <div class="icon-grid">
        ${iconEntries.map(([name]) => {
            // convert component name → custom element tag
            // example: Cross24 → cross-24
            const tagName = name
                // ArrowLeft → Arrow-Left
                .replace(/([a-z])([A-Z])/g, '$1-$2')
                // a11y32 → a11y-32 (ONLY last number group)
                .replace(/(\D)(\d+)$/, '$1-$2')
                .toLowerCase();
            const Tag = unsafeStatic(tagName);
            return html `
            <div class="icon-item">
              <${Tag}></${Tag}>
              <div class="icon-label">${tagName}</div>
            </div>
          `;
        })}
      </div>
    `;
    },
};
