import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import {
    FormControl,
    FormGroup,
    FormsModule,
    ReactiveFormsModule,
    Validators,
} from '@angular/forms';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

// modules
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgxMaskModule } from 'ngx-mask';

// components
import { CaInputDropdownComponent } from './ca-input-dropdown.component';

// helpers
import { InputDropdownSvgRoutes } from './utils/svg-routes/input-dropdown-svg-routes';

// constants
import { InputDropdownConstants } from './utils/constants';

const meta: Meta<CaInputDropdownComponent> = {
    title: 'Example/InputDropdown',
    component: CaInputDropdownComponent,
    tags: ['autodocs'],
    decorators: [
        moduleMetadata({
            imports: [
                // Module
                CommonModule,
                FormsModule,
                ReactiveFormsModule,
                AngularSvgIconModule.forRoot(),
                NgxMaskModule.forRoot(),
                HttpClientModule,
                NgbModule,
            ],
            providers: [SvgIconRegistryService],

            schemas: [CUSTOM_ELEMENTS_SCHEMA],
        }),
    ],
    argTypes: {
        inputConfig: {
            control: { type: 'object' },
        },
        selectedItem: { action: 'selectedItem' },
    },
    args: {
        inputConfig: {
            name: 'Input Dropdown',
            type: 'text',
            label: 'Length',
            isDropdown: true,
            dropdownWidthClass: 'w-col-100',
        },
    },
};

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

const formGroup = new FormGroup({
    testInput: new FormControl(undefined, [Validators.required]),
});

const formTemplate: string = `
  <form style='width: 400px' [formGroup]="form">
    <app-ca-input-dropdown
      formControlName="testInput"
      [inputConfig]="config"
      [options]="options"
    >
    </app-ca-input-dropdown>
  </form>
`;

const formTemplateTrailer: string = `
  <form style='width: 400px' [formGroup]="form">
    <app-ca-input-dropdown
      formControlName="testInput"
      [template]="'svgtext-template'"
      [inputConfig]="config"
      [options]="options"
      [activeItem]="selectedTrailer"
      (selectedItem)="selectedItem($event, 'truck-req')"
    >
    </app-ca-input-dropdown>
  </form>
`;

// [activeItem]="selectedTrailer"
const inputDropdownSvgRoutes = InputDropdownSvgRoutes;

export const InputDropdown: Story = {
    render: (args) => ({
        props: {
            ...args,
            config: args.inputConfig,
            options: InputDropdownConstants.labelsTrailerLength,
            formControlName: 'testInput',
            form: formGroup,
        },
        template: formTemplate,
    }),
};

let selectedTrailer: any;

export const TrailerDropdown: Story = {
    render: (args) => ({
        props: {
            ...args,
            config: {
                name: 'Input Dropdown',
                type: 'text',
                label: 'Trailer Requirement',
                isDropdown: true,
                dropdownImageInput: {
                    withText: true,
                    svg: true,
                    image: false,
                    url: selectedTrailer?.logoName,
                    template: 'trailer',
                    class: ['Tanker', 'Tanker Pneumatic'].includes(
                        selectedTrailer?.name
                    )
                        ? 'tanker'
                        : selectedTrailer?.name?.toLowerCase()?.includes('rgn')
                          ? 'low-boy-rgn'
                          : selectedTrailer?.name
                                ?.trim()
                                .replace(' ', '')
                                .toLowerCase(),
                },
                dropdownWidthClass: 'w-col-302',
                customClass: 'truck-trailer-dropdown',
            },
            options: InputDropdownConstants.labelsTrailer,
            formControlName: 'testInput',
            form: formGroup,
        },
        template: formTemplateTrailer,
    }),
};