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

// Modules
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { importProvidersFrom } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgbPopoverModule, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
import { HttpClientModule } from '@angular/common/http';
import { AngularSvgIconModule } from 'angular-svg-icon';

// Components
import { CaDetailsTitleCardComponent } from './ca-details-title-card.component';
import { eGeneralActions } from '../../enums';

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

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

const detailsTitleCardTemplate: string = `
  <app-ca-details-title-card
    [detailsTitleCardConfig]="detailsTitleCardConfig"
    [titleTemplate]="titleTemplate"
  >
  </app-ca-details-title-card>

  <ng-template #titleTemplate>
    <div class="d-flex justify-content-between w-100">
        <div class="d-flex">Load IV84024</div>
        <div class="d-flex">Load IV84024</div>
    </div>
  </ng-template>
`;

export const DisableNextPrevious: Story = {
    render: (args) => ({
        props: {
            ...args,
            detailsTitleCardConfig: {
                title: 'TEST',
                tooltip: 'Some tooltip',
                placeholder: 'IVS-123-25',
                width: 364,
                tooltipNext: eGeneralActions.NEXT,
                tooltipPrevious: eGeneralActions.PREVIOUS,
                isNextButtonDisabled: true,
                isPreviousButtonDisabled: true,
            },
        },
        template: detailsTitleCardTemplate,
    }),
};

export const DetailsTitleCardExample: Story = {
    render: (args) => ({
        props: {
            ...args,
            detailsTitleCardConfig: {
                title: 'TEST',
                tooltip: 'Some tooltip',
                placeholder: 'IVS-123-25',
                width: 364,
                tooltipNext: eGeneralActions.NEXT,
                tooltipPrevious: eGeneralActions.PREVIOUS,
            },
        },
        template: detailsTitleCardTemplate,
    }),
};