import { argsToTemplate, Meta } from '@storybook/angular';
import { ProductFormatIconGroup } from '@isa/icons';
import { ProductFormatComponent } from '@isa/shared/product-format';

type ProductFormatInputs = {
  format: string;
  formatDetail: string;
  formatDetailsBold: boolean;
};

const options = Object.keys(ProductFormatIconGroup).map((key) =>
  key.toUpperCase(),
);

const meta: Meta<ProductFormatInputs> = {
  title: 'shared/product-format/ProductFormat',
  component: ProductFormatComponent,
  argTypes: {
    format: {
      control: {
        type: 'select',
      },
      options,
      description: 'The product format to display the icon for.',
      defaultValue: options[0],
    },
    formatDetail: {
      control: {
        type: 'text',
      },
      description: 'The detail text for the product format.',
      defaultValue: 'Default Format Detail',
    },
    formatDetailsBold: {
      control: {
        type: 'boolean',
      },
      description: 'Whether the format detail text should be bold.',
      defaultValue: false,
    },
  },
  args: {
    format: options[0], // Default value for the product format
    formatDetail: 'Default Format Detail', // Default value for the format detail
    formatDetailsBold: false, // Default value for the format details bold
  },
  render: (args) => ({
    props: args,
    template: `<shared-product-format ${argsToTemplate(args)}></shared-product-format>`,
  }),
};

export default meta;

type Story = typeof meta;

export const Default: Story = {};
