import {
  type Meta,
  type StoryObj,
  applicationConfig,
  argsToTemplate,
  moduleMetadata,
} from '@storybook/angular';
import {
  ProductInfoComponent,
  ProductInfoItem,
  ProductInfoOrientation,
} from '@isa/remission/shared/product';
import { provideProductImageUrl } from '@isa/shared/product-image';
import { provideProductRouterLinkBuilder } from '@isa/shared/product-router-link';
import { provideRouter } from '@angular/router';

type ProductInfoInputs = {
  item: ProductInfoItem;
  orientation: ProductInfoOrientation;
  innerGridClass: string;
};

const meta: Meta<ProductInfoInputs> = {
  component: ProductInfoComponent,
  title: 'remission/shared/product/ProductInfoComponent',
  decorators: [
    applicationConfig({
      providers: [
        provideRouter([{ path: ':ean', component: ProductInfoComponent }]),
      ],
    }),
    moduleMetadata({
      providers: [
        provideProductImageUrl('https://produktbilder-test.paragon-data.net'),
        provideProductRouterLinkBuilder((ean: string) => ean),
      ],
    }),
  ],
  args: {
    item: {
      product: {
        contributors: 'John Doe',
        ean: '9783742327529',
        format: 'TB',
        formatDetail: 'Taschenbuch',
        name: 'Test Product',
      },
      retailPrice: {
        value: {
          currency: 'EUR',
          value: 19.99,
        },
      },
      tag: 'Prio 2',
    },
    orientation: 'horizontal',
    innerGridClass: 'grid-cols-[minmax(20rem,1fr),auto]',
  },
  argTypes: {
    item: {
      control: 'object',
      description: 'The product item to display.',
    },
    orientation: {
      control: 'select',
      options: ['horizontal', 'vertical'],
      description: 'The orientation of the product info display.',
      table: {
        defaultValue: {
          summary: 'horizontal',
        },
      },
    },
    innerGridClass: {
      control: 'text',
      description:
        'Custom CSS classes for the inner grid layout. (Applies on vertical layout only)',
      table: {
        defaultValue: {
          summary: 'grid-cols-[minmax(20rem,1fr),auto]',
        },
      },
    },
  },
  render: (args) => ({
    props: args,
    template: `<remi-product-info ${argsToTemplate(args)}></remi-product-info>`,
  }),
};

export default meta;

type Story = StoryObj<ProductInfoInputs>;

export const Default: Story = {
  args: {
    item: {
      product: {
        contributors: 'John Doe',
        ean: '9783742327529',
        format: 'HC',
        formatDetail: 'Hardcover (gebunden)',
        name: 'Sample Product',
      },
      retailPrice: {
        value: {
          currency: 'EUR',
          value: 29.99,
        },
      },
      tag: 'Prio 2',
    },
  },
};
