import {
  argsToTemplate,
  type Meta,
  type StoryObj,
  moduleMetadata,
} from '@storybook/angular';
import {
  ProductImageDirective,
  provideProductImageUrl,
} from '@isa/shared/product-image';

type ProductImageInputs = {
  ean: string;
  imageWidth: number;
  imageHeight: number;
};

const meta: Meta<ProductImageInputs> = {
  title: 'shared/product-image/ProductImage',

  decorators: [
    moduleMetadata({
      imports: [ProductImageDirective],
      providers: [
        provideProductImageUrl('https://produktbilder-test.paragon-data.net'),
      ],
    }),
  ],
  argTypes: {
    ean: {
      control: {
        type: 'text',
      },
    },
    imageWidth: {
      control: {
        type: 'number',
      },
    },
    imageHeight: {
      control: {
        type: 'number',
      },
    },
  },
  render: (args) => ({
    props: args,
    template: `<img sharedProductImage ${argsToTemplate(args)} />`,
  }),
};

export default meta;

type Story = StoryObj<ProductImageDirective>;

export const Default: Story = {
  args: {
    ean: '9783742327529',
  },
};
