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

// modules
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';

// components
import { CaTabSwitchComponent } from './ca-tab-switch.component';

// components

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

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

export const Main: Story = {
    args: {},
    render: (args) => ({
        props: {
            ...args,
            onTabChange: (event: any) => {
                console.log('Selected Item:', event);
            },
            areaBoxTab: [
                {
                    id: 1,
                    name: 'Tab 1',
                    checked: true,
                },
                {
                    id: 2,
                    name: 'Tab 2',
                    checked: false,
                },
            ],
        },
        template: `
        <app-ca-tab-switch
            [type]="'type1-modal-popup'"
            [tabs]="areaBoxTab"
            (switchClicked)="onTabChange($event, 'REQUESTS-BOX')"
        ></app-ca-tab-switch>
    `,
    }),
};

export const Default: Story = {
    args: {},
    render: (args) => ({
        props: {
            ...args,
            onTabChange: (event: any) => {
                console.log('Selected Item:', event);
            },
            areaBoxTab: [
                {
                    id: 1,
                    name: 'Tab 1',
                    checked: true,
                },
                {
                    id: 2,
                    name: 'Tab 2',
                    checked: false,
                },
            ],
        },
        template: `
        <app-ca-tab-switch
            [type]="'type3-modal-popup'"
            [tabs]="areaBoxTab"
            (switchClicked)="onTabChange($event, 'REQUESTS-BOX')"
        ></app-ca-tab-switch>
    `,
    }),
};

export const Default2: Story = {
    args: {},
    render: (args) => ({
        props: {
            ...args,
            onTabChange: (event: any) => {
                console.log('Selected Item:', event);
            },
            areaBoxTab: [
                {
                    id: 1,
                    name: 'Tab 1',
                    checked: true,
                },
                {
                    id: 2,
                    name: 'Tab 2',
                    checked: false,
                },
            ],
        },
        template: `
        <app-ca-tab-switch
            [type]="'type2-modal-popup delivery'"
            [tabs]="areaBoxTab"
            (switchClicked)="onTabChange($event, 'REQUESTS-BOX')"
        ></app-ca-tab-switch>
    `,
    }),
};

export const Black: Story = {
    args: {},
    render: (args) => ({
        props: {
            ...args,
            onTabChange: (event: any) => {
                console.log('Selected Item:', event);
            },
            areaBoxTab: [
                {
                    id: 1,
                    name: 'Tab 1',
                    checked: true,
                },
                {
                    id: 2,
                    name: 'Tab 2',
                    checked: false,
                },
            ],
        },
        template: `
        <app-ca-tab-switch
            [type]="'type2-modal-popup'"
            [tabs]="areaBoxTab"
            (switchClicked)="onTabChange($event, 'REQUESTS-BOX')"
        ></app-ca-tab-switch>
    `,
    }),
};