import { Meta, StoryObj } from '@storybook/angular';
import { withContrastedVariant } from '../../../.storybook/utils/with-contrasted-variant.decorator';
import { engieIconName, IconEngieComponent } from '../../public-api';

/**
 * Engie Fluid icons, note that you will need to add
 * `node_modules/@engie-group/fluid-design-system/lib/components/icon/fluid.css` in `angular.json`
 * if you want to use them. Please read lib `README` for more information
 */
const meta: Meta<IconEngieComponent> = {
  title: 'Deprecated/Engie Icon',
  id: 'icon-engie-deprecated',
  component: IconEngieComponent,
  decorators: [
    withContrastedVariant({
      stateByProps: (props) => {
        return props['variant'] === 'inverse' ? 'inverse' : null;
      }
    })
  ],
  parameters: {
    docs: {
      until: '2.12.0',
      imports: [IconEngieComponent]
    }
  },
  argTypes: {
    name: {
      options: engieIconName,
      control: {
        type: 'select'
      }
    },
    className: {
      control: {
        type: null
      }
    }
  }
};

export default meta;

type Story = StoryObj<IconEngieComponent>;

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