import {
    applicationConfig,
    Meta,
    moduleMetadata,
    StoryFn,
} from '@storybook/angular';
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
import { CommonModule } from '@angular/common';
import { importProvidersFrom } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

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

//Components
import { CaIconDropdownComponent } from './ca-icon-dropdown.component';

export default {
    title: 'Example/Icon Dropdown',
    component: CaIconDropdownComponent,
    decorators: [
        applicationConfig({
            providers: [
                SvgIconRegistryService,
                importProvidersFrom(
                    HttpClientModule,
                    AngularSvgIconModule.forRoot()
                ),
            ],
        }),
        moduleMetadata({
            imports: [CommonModule, NgbPopoverModule, AngularSvgIconModule],
        }),
    ],

    argTypes: {
        icon: { control: 'text' },
        dropdownItems: { control: { type: 'object' } },
        selectedItem: { action: 'selectedItem' },
    },
} as Meta<CaIconDropdownComponent>;

const Template: StoryFn<CaIconDropdownComponent> = (args) => ({
    props: { ...args },
});

export const LongListWithScroll = Template.bind({});
LongListWithScroll.args = {
    iconDropdownConfig: {
        icon: 'assets/ca-components/svg/common/colors/ic_color.svg',
        iconColor: '#919191',
        iconBackgroundColor: 'transparent',
        iconHoverColor: '#424242',
        iconHoverBackgroundColor: '#EEEEEE',
        iconActiveColor: '#DADADA',
        iconActiveBackgroundColor: '#2f2f2f',
        dropdownWidth: '140',
        dropdownItems: [
            { label: 'Dark Blue', value: '#2724D6' },
            { label: 'Light Blue', value: '#1AB5E6' },
            { label: 'Red', value: '#DF3C3C' },
            { label: 'Orange', value: '#FF7043' },
            { label: 'Yellow', value: '#F89B2E' },
            {
                label: 'Very long name of a property long long longlonglonglonglonglonglong long longlong',
                value: '#919191',
            },
            { label: 'Gold', value: '#CF961D' },
            { label: 'Dark Green', value: '#259F94' },
            { label: 'Light Green', value: '#50AC25' },
            { label: 'Purple', value: '#9E47EC' },
            { label: 'Pink', value: '#DF3D85' },
            { label: 'Brown', value: '#865E3A' },
            { label: 'Gray', value: '#919191' },
        ],
        tooltipLabel: 'Color',
        placement: [ePlacement.BOTTOM_LEFT],
    },
};

export const ShortListNoScroll = Template.bind({});
ShortListNoScroll.args = {
    iconDropdownConfig: {
        icon: 'assets/ca-components/svg/common/colors/ic_color.svg',
        iconColor: '#919191',
        iconBackgroundColor: 'transparent',
        iconHoverColor: '#424242',
        iconHoverBackgroundColor: '#EEEEEE',
        iconActiveColor: '#DADADA',
        iconActiveBackgroundColor: '#2f2f2f',
        dropdownWidth: '240',
        dropdownItems: [
            { label: 'Dark Blue', value: '#2724D6' },
            { label: 'Light Blue', value: '#1AB5E6' },
            { label: 'Red', value: '#DF3C3C' },
            { label: 'Orange', value: '#FF7043' },
            { label: 'Yellow', value: '#F89B2E' },
            {
                label: 'Very long name of a property long long longlonglonglonglonglonglong long longlong',
                value: '#919191',
            },
        ],
        tooltipLabel: 'Color',
        placement: [ePlacement.BOTTOM_LEFT],
    },
};