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

const mockProduct = {
  ean: '9783498007706',
  name: 'Die Assistentin',
  contributors: 'Wahl, Caroline',
};

const meta: Meta<ProductInfoComponent> = {
  title: 'checkout/shared/product-info/ProductInfo',
  component: ProductInfoComponent,
  decorators: [
    applicationConfig({
      providers: [
        provideRouter([{ path: ':ean', component: ProductInfoComponent }]),
      ],
    }),
    moduleMetadata({
      providers: [
        provideProductImageUrl('https://produktbilder-test.paragon-data.net'),
        provideProductRouterLinkBuilder((ean: string) => ean),
      ],
    }),
  ],
};

export default meta;

type Story = StoryObj<ProductInfoComponent>;

export const BasicWithoutContent: Story = {
  args: {
    item: mockProduct,
    nameSize: 'medium',
  },
  argTypes: {
    item: { control: 'object' },
    nameSize: {
      control: { type: 'radio' },
      options: ['small', 'medium', 'large'],
    },
  },
};

export const SmallNameSize: Story = {
  args: {
    item: mockProduct,
    nameSize: 'small',
  },
};

export const MediumNameSize: Story = {
  args: {
    item: mockProduct,
    nameSize: 'medium',
  },
};

export const LargeNameSize: Story = {
  args: {
    item: mockProduct,
    nameSize: 'large',
  },
};

export const WithLesepunkte: Story = {
  args: {
    item: mockProduct,
    nameSize: 'medium',
  },
  render: (args) => ({
    props: args,
    template: `
      <checkout-product-info [item]="item" [nameSize]="nameSize">
        <div class="isa-text-body-2-regular">
          <span class="isa-text-body-2-bold">150</span> Lesepunkte
        </div>
      </checkout-product-info>
    `,
  }),
};

export const WithManufacturer: Story = {
  args: {
    item: mockProduct,
    nameSize: 'medium',
  },
  render: (args) => ({
    props: args,
    template: `
      <checkout-product-info [item]="item" [nameSize]="nameSize">
        <div class="isa-text-body-2-regular text-neutral-600">
          Rowohlt Taschenbuch
        </div>
      </checkout-product-info>
    `,
  }),
};

export const WithMultipleRows: Story = {
  args: {
    item: mockProduct,
    nameSize: 'medium',
  },
  render: (args) => ({
    props: args,
    template: `
      <checkout-product-info [item]="item" [nameSize]="nameSize">
        <div class="isa-text-body-2-regular">
          <span class="isa-text-body-2-bold">150</span> Lesepunkte
        </div>
        <div class="isa-text-body-2-regular text-neutral-600">
          Rowohlt Taschenbuch
        </div>
        <div class="isa-text-body-2-regular text-neutral-600">
          Erschienen: 01. Januar 2023
        </div>
      </checkout-product-info>
    `,
  }),
};
