import { Tokens } from '@engie-group/fluid-design-tokens';
import { Meta, StoryObj } from '@storybook/angular';
import { withContrastedVariant } from '../../../.storybook/utils/with-contrasted-variant.decorator';
import { IconComponent, ThemeComponentsVariantsArray } from '../../public-api';

const meta: Meta<IconComponent> = {
  title: 'Components/Icon',
  id: 'icon',
  component: IconComponent,
  decorators: [
    withContrastedVariant({
      stateByProps: (props) => {
        return props['variant'] === 'inverse' ? 'inverse' : null;
      }
    })
  ],
  parameters: {
    docs: {
      description: {
        component: 'Material UI icon'
      }
    },
    imports: [IconComponent]
  },
  argTypes: {
    variant: {
      options: ['inherit', 'inverse', 'secondary', 'tertiary', ...ThemeComponentsVariantsArray],
      control: {
        type: 'select'
      }
    },
    size: {
      options: [...Object.keys(Tokens.semantic.size.icon), 'inherit'],
      control: {
        type: 'radio'
      }
    },
    name: {
      description: 'Material icon name. https://material.io/resources/icons/?style=baseline'
    },
    className: {
      control: {
        type: null
      }
    }
  }
};

export default meta;

type Story = StoryObj<IconComponent>;

export const Icon: Story = {
  args: {
    name: 'settings',
    ariaLabel: 'Some accessible label'
  }
};