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 {
    CaToolbarTabSwitchComponent,
} from './ca-toolbar-tab-switch.component';

// Enums
import { eToolbarVariant } from './enums';

const meta: Meta<CaToolbarTabSwitchComponent> = {
    title: 'Example/CaToolbarTabSwitch',
    component: CaToolbarTabSwitchComponent,
    tags: ['autodocs'],
    decorators: [
        applicationConfig({
            providers: [
                SvgIconRegistryService,
                importProvidersFrom(
                    HttpClientModule,
                    AngularSvgIconModule.forRoot()
                ),
            ],
        }),
    ],
    parameters: {
        docs: {
            description: {
                component: `
# Toolbar Tab Switch Component

A versatile tab switching component with two variants for different use cases. Features smooth animations when switching between tabs.

## Variants

- **Large**: Displays tabs with title, counter badges, and more spacing. Ideal for main navigation sections.
- **Small**: Compact tab layout without counters. Perfect for view toggles and secondary navigation.

## Features

- Animated tab switching with smooth transitions
- Support for disabled tabs
- Customizable tab data with counters (Large variant)
- Emits events when tabs are selected
- Shadow DOM encapsulation for style isolation

## Usage

Each tab item should include both \`name\` and \`title\` properties to ensure compatibility when switching variants dynamically.
                `,
            },
        },
    },
    argTypes: {
        data: {
            description:
                'Array of tab items. Each item should contain `name`, `title`, and optionally `length` (for counters) and `isDisabled`.',
            control: 'object',
        },
        selectedTab: {
            description:
                'The name or title of the currently selected tab. Should match either the `name` or `title` property of a tab item.',
            control: 'text',
        },
        variant: {
            description:
                'Visual variant of the toolbar. Large variant shows counters and has more spacing, Small variant is compact.',
            control: 'select',
            options: [eToolbarVariant.Large, eToolbarVariant.Small],
            mapping: {
                Large: eToolbarVariant.Large,
                Small: eToolbarVariant.Small,
            },
        },
        tabSelected: {
            description:
                'Event emitted when a tab is clicked. Emits the tab name (Small variant) or title (Large variant).',
        },
    },
};

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

export const Large: Story = {
    args: {
        data: [
            { name: 'Template', title: 'Template', length: 4 },
            { name: 'Pending', title: 'Pending', length: 35 },
            { name: 'Active', title: 'Active', length: 7 },
            { name: 'Closed', title: 'Closed', length: 69 },
        ],
        selectedTab: 'Active',
        variant: eToolbarVariant.Large,
    },
    parameters: {
        docs: {
            description: {
                story: 'Large variant with counter badges displaying item counts. Ideal for main navigation sections like status tabs with numerical indicators. Each tab shows a badge with the count value, and the selected tab is highlighted with a white background on the counter.',
            },
        },
    },
};

export const Small: Story = {
    args: {
        data: [
            { name: 'List', title: 'List', length: 0 },
            { name: 'Card', title: 'Card', length: 0 },
        ],
        selectedTab: 'List',
        variant: eToolbarVariant.Small,
    },
    parameters: {
        docs: {
            description: {
                story: 'Small compact variant without counter badges. Perfect for view toggles and secondary navigation where space is limited. This variant focuses on simplicity with just the tab labels and active indicator.',
            },
        },
    },
};

export const WithDisabledTabs: Story = {
    args: {
        data: [
            { name: 'Active', title: 'Active', length: 12 },
            { name: 'Pending', title: 'Pending', length: 8 },
            {
                name: 'Archived',
                title: 'Archived',
                length: 156,
                isDisabled: true,
            },
            { name: 'Deleted', title: 'Deleted', length: 0, isDisabled: true },
        ],
        selectedTab: 'Active',
        variant: eToolbarVariant.Large,
    },
    parameters: {
        docs: {
            description: {
                story: 'Demonstrates disabled tabs functionality. Disabled tabs are visually dimmed with reduced opacity and cannot be clicked. Useful for showing unavailable sections or features that require certain permissions.',
            },
        },
    },
};

export const SmallWithDisabledTab: Story = {
    args: {
        data: [
            { name: 'List', title: 'List', length: 0 },
            { name: 'Card', title: 'Card', length: 0 },
            { name: 'Map', title: 'Map', length: 0, isDisabled: true },
        ],
        selectedTab: 'List',
        variant: eToolbarVariant.Small,
    },
    parameters: {
        docs: {
            description: {
                story: 'Small variant with a disabled tab. Shows how the compact variant handles disabled states, perfect for view toggles where certain views are temporarily unavailable or require specific permissions.',
            },
        },
    },
};