import {
    Meta,
    moduleMetadata,
    StoryObj,
    applicationConfig,
} from '@storybook/angular';
import { HttpClientModule } from '@angular/common/http';

// modules
import { AngularSvgIconModule } from 'angular-svg-icon';
import { CaCustomCardComponent } from './ca-custom-card.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbPopoverModule, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
import { importProvidersFrom } from '@angular/core';
import { CommonModule } from '@angular/common';

const meta: Meta<CaCustomCardComponent<Meta>> = {
    title: 'Example/CaCustomCardComponent',
    component: CaCustomCardComponent,
    tags: ['autodocs'],
    decorators: [
        moduleMetadata({
            imports: [
                CommonModule,
                NgbPopoverModule,
                AngularSvgIconModule,
                NgbTooltip,
            ],
        }),
        applicationConfig({
            providers: [
                importProvidersFrom(
                    BrowserAnimationsModule,
                    HttpClientModule,
                    AngularSvgIconModule.forRoot(),
                    NgbTooltip
                ),
            ],
        }),
    ],
};

export default meta;
type Story = StoryObj<CaCustomCardComponent<StoryObj>>;

const cardTemplate: string = `
  <app-ca-custom-card
    [cardName]="cardName"
    [hasPlusIcon]="hasPlusIcon"
    [headerLeftSideTemplate]="mockTemplateLeft"
    [headerRightSideTemplate]="mockTemplateRight"
  >
    <div>Something to show me</div>
  </app-ca-custom-card>

  <ng-template #mockTemplateLeft>
      <div style="color: red;">This is a mocked template!</div>
    </ng-template>

  <ng-template #mockTemplateRight>
    <div style="color: blue;">This is a mocked template!</div>
  </ng-template>
`;

export const DefaultCard: Story = {
    args: {
        cardName: 'Test',
    },
};

export const DisabledCard: Story = {
    args: {
        cardName: 'Test',
        isDisabledCard: true,
    },
};

export const CardWithTemplate: Story = {
    render: (args) => ({
        props: {
            ...args,
            cardName: 'Test',
        },
        template: cardTemplate,
    }),
};

export const CardWithPlusTemplate: Story = {
    render: (args) => ({
        props: {
            ...args,
            cardName: 'Test',
            hasPlusIcon: true,
            isCardOpen: true,
        },
    }),
};