import { CommonModule } from '@angular/common';
import { importProvidersFrom } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {
    applicationConfig,
    moduleMetadata,
    StoryObj,
    Meta,
} from '@storybook/angular';

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

// components
import { CaToolbarDropdownComponent } from './ca-toolbar-dropdown.component';

const meta: Meta<CaToolbarDropdownComponent> = {
    title: 'Example/CaToolbarDropdown',
    component: CaToolbarDropdownComponent,
    tags: ['autodocs'],
    decorators: [
        applicationConfig({
            providers: [importProvidersFrom(BrowserAnimationsModule)],
        }),
        moduleMetadata({
            imports: [
                // modules
                CommonModule,
                FormsModule,
                ReactiveFormsModule,
                BrowserAnimationsModule,
                AngularSvgIconModule.forRoot(),

                NgbModule,
            ],
            providers: [SvgIconRegistryService],
        }),
    ],
    argTypes: {},
};
export default meta;
type Story = StoryObj<CaToolbarDropdownComponent>;

export const ToolbarDropdownStory: Story = {
    args: {
        dropdownOptions: [
            {
                id: 1,
                title: 'Comments',
                count: 5,
                isSelected: false,
                avatar: '',
                iconColor: '#ffffff',
                icon: 'assets/ca-components/svg/common/ic_columns.svg',                
            },
            {
                id: 2,
                title: 'Status Log',
                count: 10,
                isSelected: false,
                avatar: 'https://s3.rute.co:9000/devcarriera/User avatar/37/9/9c14dff2-fed4-44a0-88ca-0a1a2da7541b-userAvatar.png',
                iconColor: '',
                icon: '',
            },        
            {
                id: 3,
                title: 'Charlie Brown',
                count: 4,
                isSelected: false,
                avatar: '',
                avatarColor: {
                    background: '#B7B6F1',
                    color: '#6D82C7',
                },
                iconColor: '',
                icon: '',
            }    
        ],
    },
};