import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
import { importProvidersFrom } from '@angular/core';

// modules
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
import { HttpClientModule } from '@angular/common/http';

// components
import { CaTableCardViewComponent } from './ca-table-card-view.component';

const meta: Meta<CaTableCardViewComponent<any>> = {
    title: 'Example/CaTableCardView',
    component: CaTableCardViewComponent,
    tags: ['autodocs'],
    decorators: [
        applicationConfig({
            providers: [
                SvgIconRegistryService,
                importProvidersFrom(
                    HttpClientModule,
                    AngularSvgIconModule.forRoot()
                ),
            ],
        }),
    ],
};

export default meta;
type Story = StoryObj<CaTableCardViewComponent<any>>;

export const Default: Story = {
    args: {
        viewData: [
            {
                title: 'Card 1',
                description: 'This is the first card',
                revenue: 'Title',
            },
            {
                title: 'Card 2',
                description: 'This is the second card',
                revenue: 'Title1',
            },
            {
                title: 'Card 3',
                description: 'This is the third card',
                revenue: 'Title2',
            },
            {
                title: 'Card 4',
                description: 'This is the fourth card',
                revenue: 'Title3',
            },
        ],
        frontSide: undefined,
        cardTitle: 'revenue',
        isDropdownMenuHidden: false,
        isSelectHidden: false,
        isCardSortingActive: false,
    },
    render: (args) => ({
        props: args,
        template: `
      <ng-template #frontSideTemplate let-data="data">
          <div class="test-class">{{ data.title }}</div>
          <div>{{ data.description }}</div>
      </ng-template>

      <ca-table-card-view 
        [frontSide]="frontSideTemplate" 
        [viewData]="viewData"
        [cardTitle]="cardTitle"
        [isDropdownMenuHidden]="isDropdownMenuHidden"
        [isSelectHidden]="isSelectHidden"
        [isCardSortingActive]="isCardSortingActive"
      ></ca-table-card-view>
    `,
    }),
};