import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
import { importProvidersFrom } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// components
import { CaModalButtonComponent } from './ca-modal-button.component';

// enums
import { eModalButtonClassType, eModalButtonSize } from './enums';

const meta: Meta<CaModalButtonComponent> = {
    title: 'Example/CaModalButtonComponent',
    component: CaModalButtonComponent,
    tags: ['autodocs'],
    decorators: [
        applicationConfig({
            providers: [importProvidersFrom(BrowserAnimationsModule)],
        }),
    ],
    args: {
        type: eModalButtonClassType.PRIMARY_POSITIVE,
        size: eModalButtonSize.NORMAL,
        text: 'text',
        loadingText: 'Loading',
        isValid: true,
        isModalButton: false,
        isSpinnerShown: false,
        hasBothSpinnerAndText: false,
    },
    argTypes: {
        type: {
            control: 'select',
            options: Object.values(eModalButtonClassType),
            description: 'Button style variant (primary, secondary, special).',
            table: {
                category: 'Basic Configuration',
                type: { summary: 'eModalButtonClassType' },
                defaultValue: { summary: 'PRIMARY_POSITIVE' },
            },
        },
        size: {
            control: 'select',
            options: Object.values(eModalButtonSize),
            description: 'Button size variant.',
            table: {
                category: 'Basic Configuration',
                type: { summary: 'eModalButtonSize' },
                defaultValue: { summary: 'NORMAL' },
            },
        },
        text: {
            control: 'text',
            description: 'Button label text.',
            table: {
                category: 'Basic Configuration',
                type: { summary: 'string' },
                defaultValue: { summary: 'text' },
            },
        },
        isSpinnerShown: {
            control: 'boolean',
            description: 'Show loading spinner.',
            table: {
                category: 'Loading State',
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
            },
        },
        loadingText: {
            control: 'text',
            description: 'Loading state text (modal buttons only).',
            table: {
                category: 'Loading State',
                type: { summary: 'string' },
                defaultValue: { summary: 'Loading' },
            },
        },
        hasBothSpinnerAndText: {
            control: 'boolean',
            description: 'Show spinner and text together.',
            table: {
                category: 'Loading State',
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
            },
        },
        isModalButton: {
            control: 'boolean',
            description: 'Use modal button template.',
            table: {
                category: 'Modal Configuration',
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
            },
        },
        isValid: {
            control: 'boolean',
            description: 'Button validation state.',
            table: {
                category: 'Validation',
                type: { summary: 'boolean' },
                defaultValue: { summary: 'true' },
            },
        },
    },
};

export default meta;
type Story = StoryObj<CaModalButtonComponent>;
export const PrimaryPositive: Story = {
    args: {
        type: eModalButtonClassType.PRIMARY_POSITIVE,
        text: 'text',
    },
};

export const SecondaryPositive: Story = {
    args: {
        type: eModalButtonClassType.SECONDARY_POSITIVE,
        text: 'text',
    },
};

export const PrimaryNeutral: Story = {
    args: {
        type: eModalButtonClassType.PRIMARY_NEUTRAL,
        text: 'text',
    },
};

export const SecondaryNeutral: Story = {
    args: {
        type: eModalButtonClassType.SECONDARY_NEUTRAL,
        text: 'text',
    },
};

export const PrimaryNegative: Story = {
    args: {
        type: eModalButtonClassType.PRIMARY_NEGATIVE,
        text: 'text',
    },
};

export const SecondaryNegative: Story = {
    args: {
        type: eModalButtonClassType.SECONDARY_NEGATIVE,
        text: 'text',
    },
};

export const PrimaryWhite: Story = {
    args: {
        type: eModalButtonClassType.PRIMARY_WHITE,
        text: 'text',
    },
};

export const PlainText: Story = {
    args: {
        type: eModalButtonClassType.PLAIN_TEXT,
        text: 'Import List',
    },
};

export const Invalid: Story = {
    args: {
        type: eModalButtonClassType.PRIMARY_POSITIVE,
        text: 'text',
        isValid: false,
    },
};

export const PrimaryPositiveSmall: Story = {
    args: {
        type: eModalButtonClassType.PRIMARY_POSITIVE,
        size: eModalButtonSize.SMALL,
        text: 'text',
    },
};

export const PrimaryPositiveFullWidth: Story = {
    args: {
        type: eModalButtonClassType.PRIMARY_POSITIVE,
        size: eModalButtonSize.FULL_WIDTH,
        text: 'text',
    },
};

export const PrimaryPositiveBigFullWidth: Story = {
    args: {
        type: eModalButtonClassType.PRIMARY_POSITIVE,
        size: eModalButtonSize.BIG_FULL_WIDTH,
        text: 'text',
    },
};

export const SpecialNeutral: Story = {
    args: {
        type: eModalButtonClassType.SPECIAL_NEUTRAL,
        size: eModalButtonSize.SPECIAL_DEFAULT,
        text: 'text',
    },
};

export const SpecialPositiveDefault: Story = {
    args: {
        type: eModalButtonClassType.SPECIAL_POSITIVE,
        size: eModalButtonSize.SPECIAL_DEFAULT,
        text: 'text',
    },
};

export const SpecialPositiveSmall: Story = {
    args: {
        type: eModalButtonClassType.SPECIAL_POSITIVE,
        size: eModalButtonSize.SPECIAL_SMALL,
        text: 'text',
    },
};

export const PrimaryPositiveModal: Story = {
    args: {
        type: eModalButtonClassType.PRIMARY_POSITIVE,
        text: 'text',
        isModalButton: true,
    },
};

export const PrimaryPositiveSpinner: Story = {
    args: {
        type: eModalButtonClassType.PRIMARY_POSITIVE,
        text: 'text',
        isSpinnerShown: true,
    },
};

export const BothSpinnerAndText: Story = {
    args: {
        type: eModalButtonClassType.PRIMARY_POSITIVE,
        size: eModalButtonSize.BIG_FULL_WIDTH,
        text: 'text',
        hasBothSpinnerAndText: true,
        isSpinnerShown: true,
    },
};

export const PrimaryPositiveModalSpinner: Story = {
    args: {
        type: eModalButtonClassType.PRIMARY_POSITIVE,
        text: 'text',
        isModalButton: true,
        isSpinnerShown: true,
    },
};