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 { CaInputDropdownTestComponent } from './ca-input-dropdown-test.component';

// constants
import { InputDropdownConstants } from './utils/constants';
import { emptyValueValidator } from './validators/dropdown-empty-value.validator';

const meta: Meta<CaInputDropdownTestComponent> = {
    title: 'Example/InputDropdownTest',
    component: CaInputDropdownTestComponent,
    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' },
        activeItem: {
            control: { type: 'object' }, // Allows changing in Storybook UI
        },
    },
    args: {
        inputConfig: {
            name: 'Input Dropdown',
            type: 'text',
            label: 'Length',
            isDropdown: true,
            dropdownWidthClass: 'w-col-100',
        },
    },
};

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

const formGroup = new FormGroup({
    testInput: new FormControl({ value: undefined, disabled: true }, [
        Validators.required,
    ]),
    trailer: new FormControl(undefined, [Validators.required]),
    selectedTrailer: new FormControl(undefined),
    selectedTrailerMake: new FormControl(undefined),
    selectedColorId: new FormControl(undefined),
    selectedOwnerId: new FormControl(undefined),
    dispatchId: new FormControl(null),
    brokerId: new FormControl(null),
    pickupShipper: new FormControl(null),
    dispatcherId: new FormControl(null),
    trailerId: new FormControl(null),
    brokerContactId: new FormControl(92),
    commodityId: new FormControl(),
    paymentType: new FormControl(),
    selectedYear: new FormControl('2023'),
    trailerNotExistingId: new FormControl(null, [
        Validators.required,
        emptyValueValidator('Truck Not Linked'),
    ]),
});

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

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

const formTemplateTrailer: string = `
  <form style='width: 400px' [formGroup]="form">
    <ca-input-dropdown-test
      formControlName="trailer"
      [label]="'name'"
      [optionValue]="'id'"
      [template]="'svgtext-template'"
      [inputConfig]="config"
      [options]="options"
      [activeItem]="form.get('selectedTrailer').value"
      (selectedItem)="selectedItem($event, 'truck-req')"
    >
    </ca-input-dropdown-test>
  </form>
`;

export const TrailerDropdown: Story = {
    render: (args) => {
        const selectedTrailer = formGroup?.get('selectedTrailer')?.value || {
            logoName: '',
            name: '',
        };

        return {
            props: {
                ...args,
                activeItem: selectedTrailer,
                selectedItem: (event: any) => {
                    console.log('Selected Item:', event);
                    //formGroup.get('trailer')?.setValue(event?.name || null); // Update form control
                    //formGroup.get('selectedTrailer')?.patchValue(event || null);
                },
                config: {
                    name: 'Input Dropdown',
                    type: 'text',
                    label: 'Type',
                    isRequired: true,
                    isDropdown: true,
                    dropdownImageInput: {
                        withText: true,
                        svg: true,
                        image: false,
                        iconsPath: 'assets/ca-components/svg/common/trailers/',
                        activeItemIconKey: 'logoName',
                        template: 'trailer',
                        folder: 'common',
                        subFolder: 'trailers',
                        class: ['Tanker', 'Pneumatic Tanker'].includes(
                            selectedTrailer.name
                        )
                            ? 'tanker'
                            : selectedTrailer.name
                                    ?.toLowerCase()
                                    ?.includes('rgn')
                              ? 'low-boy-rgn'
                              : selectedTrailer.name
                                    ?.trim()
                                    .replace(' ', '')
                                    .toLowerCase(),
                    },
                    dropdownWidthClass: 'w-col-212',
                    customClass: 'truck-trailer-dropdown',
                },
                options: InputDropdownConstants.labelsTrailer,
                form: formGroup,
            },
            template: formTemplateTrailer,
        };
    },
};

const formTemplateMakeTrailer: string = `
  <form style='width: 400px' [formGroup]="form">
    <ca-input-dropdown-test
      formControlName="selectedTrailerMake"
      [label]="'name'"
      [optionValue]="'id'"
      [template]="'svg-template'"
      [inputConfig]="config"
      [options]="options"
      (selectedItem)="selectedItem($event, 'truck-req')"
    >
    </ca-input-dropdown-test>
  </form>
`;

export const TrailerMakeDropdown: Story = {
    render: (args) => {
        const selectedTrailer = formGroup?.get('selectedTrailer')?.value || {
            logoName: '',
            name: '',
        };

        return {
            props: {
                ...args,
                activeItem: selectedTrailer,
                selectedItem: (event: any) => {
                    console.log('Selected Item:', event);
                    //formGroup.get('trailer')?.setValue(event?.name || null); // Update form control
                    //formGroup.get('selectedTrailer')?.patchValue(event || null);
                },
                config: {
                    name: 'Input Dropdown',
                    type: 'text',
                    label: 'Make',
                    isRequired: true,
                    isDropdown: true,
                    dropdownImageInput: {
                        withText: false,
                        svg: true,
                        image: false,
                        iconsPath:
                            'assets/ca-components/svg/common/trailermake/',
                        activeItemIconKey: 'logoName',
                        // url: options.selectedTrailerMake?.logoName,
                        class: 'trailer-make',
                    },
                    //placeholder: options.selectedTrailerMake?.name,
                    dropdownWidthClass: 'w-col-156',
                },
                options: InputDropdownConstants.labelsTrailerMake,
                form: formGroup,
            },
            template: formTemplateMakeTrailer,
        };
    },
};

const formTemplateColorTrailer: string = `
  <form style='width: 400px' [formGroup]="form">
    <ca-input-dropdown-test
      formControlName="selectedColorId"
      [label]="'name'"
      [optionValue]="'id'"
      [template]="'svgtext-template'"
      [inputConfig]="config"
      [options]="options"
      (selectedItem)="selectedItem($event)"
    >
    </ca-input-dropdown-test>
  </form>
`;

export const TrailerColorDropdown: Story = {
    render: (args) => {
        const selectedTrailer = formGroup?.get('selectedTrailer')?.value || {
            logoName: '',
            name: '',
        };

        setTimeout(() => {
            const billingDropdown = formGroup.get('selectedColorId');
            billingDropdown?.setValidators(Validators.required);
            billingDropdown?.updateValueAndValidity();
        }, 20000);

        return {
            props: {
                ...args,
                activeItem: selectedTrailer,
                selectedItem: (event: any) => {
                    console.log('Selected Item:', event);
                },
                config: {
                    name: 'Input Dropdown',
                    type: 'text',
                    label: 'Color',
                    isDropdown: true,
                    dropdownImageInput: {
                        withText: true,
                        svg: true,
                        image: false,
                        folder: 'common',
                        subFolder: 'colors',
                        iconsPath:
                            'assets/ca-components/svg/common/colors/ic_color.svg',
                        activeItemIconKey: '',
                        template: 'color',
                    },
                    dropdownWidthClass: 'w-col-164',
                },
                options: InputDropdownConstants.labelsColors,
                form: formGroup,
            },
            template: formTemplateColorTrailer,
        };
    },
};

const formTemplateOwner: string = `
  <form style='width: 400px' [formGroup]="form">
    <ca-input-dropdown-test
      formControlName="selectedOwnerId"
      [label]="'name'"
      [optionValue]="'id'"
      [canAddNew]="true"
      [canOpenModal]="true"
      [inputConfig]="config" 
      [options]="options"
      (selectedItem)="selectedItem($event)"
    >
    </ca-input-dropdown-test>
  </form>
`;

export const OwnerDropdown: Story = {
    render: (args) => {
        const selectedTrailer = formGroup?.get('selectedTrailer')?.value || {
            logoName: '',
            name: '',
        };

        return {
            props: {
                ...args,
                activeItem: selectedTrailer,
                selectedItem: (event: any) => {
                    console.log('Selected Item:', event);
                },
                config: {
                    name: 'Input Dropdown',
                    type: 'text',
                    label: 'Owner',
                    isRequired: true,
                    isDropdown: true,
                    dropdownWidthClass: 'w-col-456',
                },
                options: InputDropdownConstants.labelsOwners,
                form: formGroup,
            },
            template: formTemplateOwner,
        };
    },
};

const formTemplateDispatchId: string = `
  <form style='width: 630px' [formGroup]="form">
    <ca-input-dropdown-test
        [label]="'id'"
        [optionValue]="'id'"
        formControlName="dispatchId"
        [template]="'load-dispatches-ttd'"
        [inputConfig]="config"
        [canAddNew]="true" 
        [canOpenModal]="true"
        [options]="options"
        (selectedItem)="selectedItem($event)"
        [activeItem]="selectedDispatches"
    >
    </ca-input-dropdown-test>
  </form>
`;

export const DispatchIdDropdown: Story = {
    render: (args) => {
        const selectedTrailer = formGroup?.get('selectedTrailer')?.value || {
            logoName: '',
            name: '',
        };

        return {
            props: {
                ...args,
                activeItem: selectedTrailer,
                selectedItem: (event: any) => {
                    console.log('Selected Item:', event);
                },
                config: {
                    name: 'Input Dropdown',
                    type: 'text',
                    multipleLabel: {
                        labels: ['Truck', 'Trailer', 'Driver', 'Rate'],
                        customClass: 'load-dispatches-ttd',
                    },
                    dropdownImageInput: {
                        activeItemIconKey: 'avatarFile.url',
                    },
                    isDropdown: true,
                    blackInput: false,
                    textTransform: 'capitalize',
                    dropdownWidthClass: 'w-col-616  hide-after-arrow',
                },
                options: InputDropdownConstants.dispatchersList,
                form: formGroup,
            },
            template: formTemplateDispatchId,
        };
    },
};

const formTemplateBrockerId: string = `
  <form style='width: 460px' [formGroup]="form">
    <ca-input-dropdown-test
        [label]="'businessName'"
        [optionValue]="'id'"
        formControlName="brokerId"
        [template]="'load-broker'"
        [inputConfig]="config"
        [canAddNew]="true"
        [canOpenModal]="true"
        [options]="options"
        [activeItem]="selectedBroker"
        (selectedItem)="selectedItem($event, 'broker')"
    >
    </ca-input-dropdown-test>
  </form>
`;

export const BrockerIdDropdown: Story = {
    render: (args) => {
        const selectedTrailer = formGroup?.get('selectedTrailer')?.value || {
            logoName: '',
            name: '',
        };

        return {
            props: {
                ...args,
                activeItem: selectedTrailer,
                selectedItem: (event: any) => {
                    console.log('Selected Item:', event);
                },
                config: {
                    name: 'Input Dropdown',
                    type: 'text',
                    multipleLabel: {
                        labels: ['Broker', 'Credit'],
                        customClass: 'load-broker hide-loads',
                    },
                    isDropdown: true,
                    isRequired: true,
                    blackInput: false,
                    textTransform: 'capitalize',
                    dropdownWidthClass: 'w-col-432',
                },
                options: InputDropdownConstants.brokerNewList,
                form: formGroup,
            },
            template: formTemplateBrockerId,
        };
    },
};

const formTemplateShipperId: string = `
  <form style='width: 660px' [formGroup]="form">
    <ca-input-dropdown-test
        [label]="'businessName'"
        [optionValue]="'id'"
        formControlName="pickupShipper"
        [template]="'load-shipper'"
        [inputConfig]="config"
        [canAddNew]="true"
        [canOpenModal]="true"
        [options]="options"
        [activeItem]="selectedBroker"
        (selectedItem)="selectedItem($event, 'broker')"
    >
    </ca-input-dropdown-test>
  </form>
`;

export const ShipperIdDropdown: Story = {
    render: (args) => {
        const selectedTrailer = formGroup?.get('selectedTrailer')?.value || {
            logoName: '',
            name: '',
        };

        return {
            props: {
                ...args,
                activeItem: selectedTrailer,
                selectedItem: (event: any) => {
                    console.log('Selected Item:', event);
                },
                config: {
                    name: 'Input Dropdown',
                    type: 'text',
                    multipleLabel: {
                        labels: ['Shipper', 'Address'],
                        customClass: 'load-shipper',
                    },
                    isDropdown: true,
                    isRequired: true,
                    blackInput: false,
                    textTransform: 'uppercase',
                    dropdownWidthClass: 'w-col-616 load-shipper-stops',
                },
                options: InputDropdownConstants.shipperList,
                form: formGroup,
            },
            template: formTemplateShipperId,
        };
    },
};

const formTemplateDispatcherId: string = `
  <form style='width: 400px' [formGroup]="form">
    <ca-input-dropdown-test
        [label]="'fullName'"
        [optionValue]="'id'"
        formControlName="dispatcherId"
        [template]="'load-dispatcher'"
        [canAddNew]="true"
        [canOpenModal]="true"
        [inputConfig]="config"
        [options]="options"
        [activeItem]="selectedBroker"
        (selectedItem)="selectedItem($event, 'broker')"
    >
    </ca-input-dropdown-test>
  </form>
`;

export const DispatcherIdDropdown: Story = {
    render: (args) => {
        const selectedTrailer = formGroup?.get('selectedTrailer')?.value || {
            logoName: '',
            name: '',
        };

        return {
            props: {
                ...args,
                activeItem: selectedTrailer,
                selectedItem: (event: any) => {
                    console.log('Selected Item:', event);
                },
                config: {
                    name: 'Input Dropdown',
                    type: 'text',
                    label: 'Dispatcher',
                    isDropdown: true,
                    isRequired: true,
                    dropdownImageInput: {
                        withText: true,
                        svg: false,
                        image: true,
                        template: 'user',
                        iconsPath: '',
                        activeItemIconKey: 'avatarFile.url',
                    },
                    textTransform: 'capitalize',
                    dropdownWidthClass: 'w-col-230 load-dispatcher-wrapper',
                },
                options: InputDropdownConstants.dispatcherList,
                form: formGroup,
            },
            template: formTemplateDispatcherId,
        };
    },
};

const formTemplateTrailerTypeId: string = `
  <form style='width: 400px' [formGroup]="form">
    <ca-input-dropdown-test
        [label]="'name'"
        [optionValue]="'id'"
        formControlName="trailerId"
        [template]="'load-dispatcher'"
        [inputConfig]="config"
        [options]="options"
        [activeItem]="selectedBroker"
        (selectedItem)="selectedItem($event, 'broker')"
    >
    </ca-input-dropdown-test>
  </form>
`;

export const TrailerTypeIdDropdown: Story = {
    render: (args) => {
        const selectedTrailer = formGroup?.get('selectedTrailer')?.value || {
            logoName: '',
            name: '',
        };

        return {
            props: {
                ...args,
                activeItem: selectedTrailer,
                selectedItem: (event: any) => {
                    console.log('Selected Item:', event);
                },
                config: {
                    name: 'Input Dropdown',
                    type: 'text',
                    label: 'Type',
                    isRequired: true,
                    isDropdown: true,
                    dropdownImageInput: {
                        withText: true,
                        svg: true,
                        folder: 'common',
                        subFolder: 'trucks',
                        image: false,
                        iconsPath: '/assets/ca-components/svg/common/trucks/',
                        activeItemIconKey: 'logoName',
                    },
                    // dropdownWidthClass:
                    //     selectedTruckType?.name === 'Box Truck'
                    //         ? 'w-col-188'
                    //         : 'w-col-308',
                    customClass: 'truck-trailer-dropdown',
                },
                options: InputDropdownConstants.trailerTypeList,
                form: formGroup,
            },
            template: formTemplateTrailerTypeId,
        };
    },
};

const formTemplateBrokerContactId: string = `
  <form style='width: 400px' [formGroup]="form">
    <ca-input-dropdown-test
        [label]="'fullName'"
        [optionValue]="'id'"
        formControlName="brokerContactId"
        [template]="'load-broker-contact'"
        [inputConfig]="config"
        [options]="options"
        [activeItem]="selectedBroker"
        (selectedItem)="selectedItem($event, 'broker')"
    >
    </ca-input-dropdown-test>
  </form>`;

export const BrokerContactDropdown: Story = {
    render: (args) => {
        setTimeout(() => {
            //formGroup.get('brokerContactId')?.patchValue(92);
            formGroup.get('brokerContactId')?.patchValue(null);
        }, 10000);

        return {
            props: {
                ...args,
                selectedItem: (event: any) => {
                    console.log('Selected Item:', event);
                },
                config: {
                    name: 'Input Dropdown',
                    type: 'text',
                    multipleLabel: {
                        labels: ['Contact', 'Phone'],
                        customClass: 'load-broker-contact',
                    },
                    searchinGroupIndex: 'contacts',
                    isDropdown: true,
                    isDisabled: false,
                    blackInput: false,
                    textTransform: 'capitalize',
                    dropdownWidthClass: 'w-col-308',
                },
                options: InputDropdownConstants.brokerContactsList,
                form: formGroup,
            },
            template: formTemplateBrokerContactId,
        };
    },
};

// Not Existing Trailer Id
const formTemplateTrailerNotExistingTypeId: string = `
  <form style='width: 400px' [formGroup]="form">
    <ca-input-dropdown-test
        [label]="'name'"
        [optionValue]="'id'"
        formControlName="trailerNotExistingId"
        [template]="'load-dispatcher'"
        [inputConfig]="config"
        [options]="options"
        (selectedItem)="selectedItem($event, 'broker')"
    >
    </ca-input-dropdown-test> 
  </form>`;

export const TrailerNotExistingTypeIdDropdown: Story = {
    render: (args) => {
        setTimeout(() => {
            formGroup.get('trailerNotExistingId')?.patchValue(111 as any);
        }, 5000);

        return {
            props: {
                ...args,
                selectedItem: (event: any) => {
                    console.log('Selected Item:', event);
                },
                config: {
                    name: 'Input Dropdown',
                    type: 'text',
                    label: 'Truck',
                    isRequired: true,
                    isDropdown: true,
                    dropdownImageInput: {
                        withText: true,
                        svg: true,
                        image: false,
                        iconsPath: 'assets/svg/common/trucks/',
                        activeItemIconKey: 'logoName',
                        template: 'truck',
                    },
                    customClass: 'truck-trailer-dropdown',
                },
                options: InputDropdownConstants.truckList,
                form: formGroup,
            },
            template: formTemplateTrailerNotExistingTypeId,
        };
    },
};

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

export const InputYearsDropdown: Story = {
    render: (args) => ({
        props: {
            ...args,
            config: {
                name: 'Input Dropdown',
                type: 'text',
                label: 'Length',
                isDropdown: true,
                dropdownWidthClass: 'w-col-100',
            },
            options: InputDropdownConstants.yearsList,
            form: formGroup,
        },
        template: formYearsTemplate,
    }),
};

const CommodityListTemplate: string = `
  <form style='width: 400px' [formGroup]="form">
    <ca-input-dropdown-test
      formControlName="commodityId"
      [inputConfig]="config"
      [options]="options"
      optionValue="id"
        label="name"
        [template]="'svgtext-template'"
    >
    </ca-input-dropdown-test>
  </form>
`;

export const CommodityListDropdown: Story = {
    render: (args) => ({
        props: {
            ...args,
            config: {
                name: 'Input Dropdown',
                type: 'text',
                label: 'Commodity',
                isDropdown: true,
                dropdownWidthClass: 'w-col-142',
                blackInput: false,
                customClass: 'hazardous-dropdown',
            },
            options: InputDropdownConstants.commodityList,
            form: formGroup,
        },
        template: CommodityListTemplate,
    }),
};

const PaymentTypeTemplate: string = `
  <form style='width: 180px' [formGroup]="form">
    <ca-input-dropdown-test
        formControlName="paymentType"
        [inputConfig]="config"
        [options]="options"
        optionValue="id"
        label="name"
    >
    </ca-input-dropdown-test>
  </form>
`;

export const PaymentTypeTemplateDropdown: Story = {
    render: (args) => ({
        props: {
            ...args,
            config: {
                type: 'text',
                labelInInput: true,
                isRequired: true,
                priceSeparator: true,
                priceSeparatorLimitation: 6,
                isPlaceHolderIconRightSideDynamicColor: true,
                placeholderIconColor: 'blue',
                inputCursorOnRightSide: true,
                hideErrorMessage: true,
                errorInsideInput: true,
                hideRequiredCheck: true,
                removeInput: true,
                maxLength: 7,
                label: 'Pay Type',
                name: 'payType',
                placeholderIconRightSide: 'billing',
                isDropdown: true,
                hideDropdownArrow: true,
            },
            options: InputDropdownConstants.paymentTypes,
            form: formGroup,
        },
        template: PaymentTypeTemplate,
    }),
};