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

// modules
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
import { HttpClientModule } from '@angular/common/http';

// components
import { CaDropdownMenuComponent } from './ca-dropdown-menu.component';

// enums
import { eDropdownMenu } from './enums';

// helpers
import { DropdownMenuHelper } from './utils/helpers';

const meta: Meta<CaDropdownMenuComponent> = {
    title: 'Example/CaDropdownMenu',
    component: CaDropdownMenuComponent,
    tags: ['autodocs'],
    decorators: [
        moduleMetadata({
            imports: [HttpClientModule, AngularSvgIconModule.forRoot()],
            providers: [SvgIconRegistryService],
        }),
    ],
    argTypes: {
        dropdownOptionEmitter: {
            control: { type: 'object' },
            action: 'onClick',
        },
    },
};

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

const getBackgroundElement = (isDarkBackground: boolean): string => `
    <div 
        class='d-flex justify-content-end align-items-center' 
        style='background:${isDarkBackground ? '#2f2f2f' : '#eeeeee'}; 
               width: 200px; 
               height: 40px; 
               padding-right: 4px'
    >
        <ca-dropdown-menu 
            [type]="type"
            [options]="options" 
            [placement]="placement"
            [isLeftSideIconPosition]="isLeftSideIconPosition" 
            [isDarkBackground]="isDarkBackground">
        </ca-dropdown-menu>
    </div>
`;

const getArgs = (itemsToExcludeIndexArray: number[] = []) => {
    return {
        options: DropdownMenuHelper.getStoryExampleItems(
            itemsToExcludeIndexArray
        ),
    };
};

// dots dropdown menu - colors, disabled, border
export const DotsDropdownMenu: Story = {
    render: (args) => ({
        props: {
            ...args,
            ...getArgs([2, 3, 8, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]),
            type: eDropdownMenu.DOTS_MENU_TYPE,
            placement: eDropdownMenu.RIGHT_TOP,
        },
        template: getBackgroundElement(false),
    }),
};

// hamburger dropdown menu
export const HamburgerDropdownMenu: Story = {
    render: (args) => ({
        props: {
            ...args,
            ...getArgs([
                0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 14, 15, 16, 17, 18, 19, 20,
                21,
            ]),
            type: eDropdownMenu.HAMBURGER_MENU_TYPE,
            placement: eDropdownMenu.BOTTOM_RIGHT,
        },
        template: getBackgroundElement(false),
    }),
};

// hamburger column dropdown menu
export const HamburgerColumnsDropdownMenu: Story = {
    render: (args) => ({
        props: {
            ...args,
            ...getArgs([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]),
            type: eDropdownMenu.HAMBURGER_MENU_TYPE,
            placement: eDropdownMenu.BOTTOM_RIGHT,
        },
        template: getBackgroundElement(false),
    }),
};

// select dropdown menu
export const SelectDropdownMenu: Story = {
    render: (args) => ({
        props: {
            ...args,
            ...getArgs([
                0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 16, 17, 18, 19,
                20, 21,
            ]),
            type: eDropdownMenu.SELECT_MENU_TYPE,
            placement: eDropdownMenu.BOTTOM_RIGHT,
        },
        template: getBackgroundElement(false),
    }),
};

// dropdown menu icons left side
export const DropdownMenuIconsLeftSide: Story = {
    render: (args) => ({
        props: {
            ...args,
            ...getArgs([3, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]),
            type: eDropdownMenu.DOTS_MENU_TYPE,
            placement: eDropdownMenu.RIGHT_TOP,
            isLeftSideIconPosition: true,
        },
        template: getBackgroundElement(false),
    }),
};

// dropdown menu inner dropdown
export const DropdownMenuInnerDropdown: Story = {
    render: (args) => ({
        props: {
            ...args,
            ...getArgs([
                1, 4, 5, 6, 7, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
            ]),
            type: eDropdownMenu.DOTS_MENU_TYPE,
            placement: eDropdownMenu.RIGHT_TOP,
        },
        template: getBackgroundElement(false),
    }),
};

// dropdown menu on dark background
export const DropdownMenuOnDarkBackground: Story = {
    render: (args) => ({
        props: {
            ...args,
            ...getArgs([2, 3, 8, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]),
            type: eDropdownMenu.DOTS_MENU_TYPE,
            placement: eDropdownMenu.RIGHT_TOP,
            isDarkBackground: true,
        },
        template: getBackgroundElement(true),
    }),
};