import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
import { ItemRowComponent } from '@isa/ui/item-rows';
import { ProductImageDirective, provideProductImageUrl } from '@isa/shared/product-image';
import { isaArtikelTaschenbuch, isaActionCheck } from '@isa/icons';
import { NgIconComponent, provideIcons } from '@ng-icons/core';
import { CheckboxComponent } from '@isa/ui/input-controls';

const meta: Meta<ItemRowComponent> = {
  component: ItemRowComponent,
  title: 'ui/item-rows/ItemRow',
  decorators: [
    moduleMetadata({
      imports: [ProductImageDirective, NgIconComponent, CheckboxComponent],
      providers: [
        provideProductImageUrl('https://produktbilder-test.paragon-data.net'),
        provideIcons({ isaArtikelTaschenbuch, isaActionCheck }),
      ],
    }),
  ],
  render: (args) => ({
    props: args,
    template: `
        <ui-item-row>
            <div>
                <a href="#">
                    <img sharedProductImage ean="9783742327529" imageWidth="100" imageHeight="100" />
                </a>
            </div>
            <div  class="text-isa-neutral-900 flex flex-col gap-2">
                <h4 class="isa-text-body-2-bold">Hefter, Martina</h4>
                <h3 class="isa-text-subtitle-1-bold">Hey guten Morgen, wie geht es dir?</h3>
                <div class="flex flex-row justify-start items-center gap-2">
                    <span class="isa-text-body-2-bold text-isa-secondary-900">12,99 €</span>
                    <span class="isa-text-body-2-regular text-isa-neutral-600" >inkl. 7% MwSt</span>
                    <ng-icon name="isaActionCheck" class="text-isa-accent-blue"></ng-icon>
                </div>
            </div>
            <div class="text-isa-neutral-900 flex flex-col gap-2">
                <div class="flex flex-row gap-2 items-center justify-start">
                    <ng-icon name="isaArtikelTaschenbuch"></ng-icon>
                    <span class="isa-text-body-2-bold truncate">Taschenbuch (Kartoniert, Paper lorem ipsum sum)</span>
                </div>
                <div>
                    Droemer/Knaur; lorem dolor sum et ent ... | 987654345678
                </div>
                <div>
                    27. März 2024
                </div>
            </div>
            <div>
                <ui-checkbox>
                    <input type="checkbox" />
                </ui-checkbox>
            </div>
        </ui-item-row>
    `,
  }),
};

export default meta;

type Story = StoryObj<ItemRowComponent>;

export const Default: Story = {
  args: {},
};
