import type { Meta, StoryObj } from '@storybook/react';
import Icon from '../index.js';
import { IconProps } from '../types.js';
import { withIconStyles } from './IconDecorator.js';
import styles from './IconDecorator.module.scss';
import { SBContainer } from '@sb-utils/SBContainer.js';

const meta: Meta<IconProps> = {
  title: 'Component Library/Icon',
  component: Icon,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: `The Icon component provides a flexible wrapper around the HubSpot CMS Icon component with support for customizable sizing, colors via CSS variables, and accessibility options.`,
      },
    },
  },
  decorators: [withIconStyles],
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    fieldPath: 'icon',
    size: 'medium',
    showIcon: true,
    purpose: 'DECORATIVE',
  },
};

export const NamedSizes: Story = {
  name: 'Named Sizes',
  render: () => (
    <SBContainer flex direction="row" gap="large" alignItems="center">
      <SBContainer addBackground flex alignItems="center">
        <h4>small (16px)</h4>
        <Icon fieldPath="icon" size="small" />
      </SBContainer>

      <SBContainer addBackground flex alignItems="center">
        <h4>medium (24px)</h4>
        <Icon fieldPath="icon" size="medium" />
      </SBContainer>

      <SBContainer addBackground flex alignItems="center">
        <h4>large (32px)</h4>
        <Icon fieldPath="icon" size="large" />
      </SBContainer>
    </SBContainer>
  ),
};

export const IconSizes: Story = {
  name: 'Icon Sizes (Explicit px)',
  render: () => (
    <SBContainer flex direction="row" gap="large" alignItems="center">
      <SBContainer addBackground flex alignItems="center">
        <h4>12px</h4>
        <Icon fieldPath="icon" size={12} />
      </SBContainer>

      <SBContainer addBackground flex alignItems="center">
        <h4>16px</h4>
        <Icon fieldPath="icon" size={16} />
      </SBContainer>

      <SBContainer addBackground flex alignItems="center">
        <h4>24px</h4>
        <Icon fieldPath="icon" size={24} />
      </SBContainer>

      <SBContainer addBackground flex alignItems="center">
        <h4>32px</h4>
        <Icon fieldPath="icon" size={32} />
      </SBContainer>

      <SBContainer addBackground flex alignItems="center">
        <h4>48px</h4>
        <Icon fieldPath="icon" size={48} />
      </SBContainer>
    </SBContainer>
  ),
};

export const Colors: Story = {
  name: 'Colors',
  render: () => (
    <SBContainer flex direction="row" gap="large" alignItems="center">
      <SBContainer addBackground flex alignItems="center">
        <h4>Default (transparent)</h4>
        <Icon fieldPath="icon" size={32} />
      </SBContainer>

      <SBContainer addBackground flex alignItems="center">
        <h4>Blue Fill</h4>
        <div className={styles.blueFill}>
          <Icon fieldPath="icon" size={32} />
        </div>
      </SBContainer>

      <SBContainer addBackground flex alignItems="center">
        <h4>Red Fill</h4>
        <div className={styles.redFill}>
          <Icon fieldPath="icon" size={32} />
        </div>
      </SBContainer>

      <SBContainer addBackground flex alignItems="center">
        <h4>Green Fill</h4>
        <div className={styles.greenFill}>
          <Icon fieldPath="icon" size={32} />
        </div>
      </SBContainer>

      <SBContainer addBackground flex alignItems="center">
        <h4>Custom Stroke</h4>
        <div className={styles.customStroke}>
          <Icon fieldPath="icon" size={32} />
        </div>
      </SBContainer>
    </SBContainer>
  ),
};

export const BackgroundShapes: Story = {
  name: 'Background Shapes',
  render: () => (
    <SBContainer flex direction="row" gap="large" alignItems="center">
      <SBContainer addBackground flex alignItems="center">
        <h4>square</h4>
        <Icon
          fieldPath="icon"
          size="medium"
          showIconBackground
          iconBackgroundColor="#2C2C2C"
          iconBackgroundShape="square"
        />
      </SBContainer>

      <SBContainer addBackground flex alignItems="center">
        <h4>rounded</h4>
        <Icon
          fieldPath="icon"
          size="medium"
          showIconBackground
          iconBackgroundColor="#2C2C2C"
          iconBackgroundShape="rounded"
        />
      </SBContainer>

      <SBContainer addBackground flex alignItems="center">
        <h4>circle</h4>
        <Icon
          fieldPath="icon"
          size="medium"
          showIconBackground
          iconBackgroundColor="#2C2C2C"
          iconBackgroundShape="circle"
        />
      </SBContainer>
    </SBContainer>
  ),
};
