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';

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

// components
import { CaInputAddressDropdownTestComponent } from './ca-input-address-dropdown-test.component';

const meta: Meta<CaInputAddressDropdownTestComponent> = {
    title: 'Example/CaInputAddressDropdownTestComponent',
    component: CaInputAddressDropdownTestComponent,
    tags: ['autodocs'],
    decorators: [
        moduleMetadata({
            imports: [
                CommonModule,
                FormsModule,
                ReactiveFormsModule,
                AngularSvgIconModule.forRoot(),
                NgxMaskModule.forRoot(),
                NgbModule,
            ],
            providers: [SvgIconRegistryService],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
        }),
    ],
    argTypes: {
        placeholderType: { control: 'text' },
        receivedAddressData: { control: 'object' },
        receivedAddressList: { control: 'object' },
        inputConfig: { control: 'object' },
        commandHandler: { control: 'object' },
        isRouting: { control: 'boolean' },
        closedBorder: { control: 'boolean' },
        incorrectValue: { control: 'boolean' },
        hideEmptyLoaded: { control: 'boolean' },
        selectedAddress: { action: 'selectedAddress' },
        sentAddressData: { action: 'sentAddressData' },
        sentAddressValue: { action: 'sentAddressValue' },
        closeDropdown: { action: 'closeDropdown' },
        commandEvent: { action: 'commandEvent' },
        changeFlag: { action: 'changeFlag' },
        incorrectEvent: { action: 'incorrectEvent' },
    },
};

const addressList = [
    '999 East Touhy Avenue, Des Plaines, IL, US',
    '999 North Elmhurst Road, Mount Prospect, IL, US',
    '999 Civic Center Drive, Niles, IL, US',
    '999 Plaza Drive, Schaumburg, IL, US',
    '999 Elmhurst Road, Mount Prospect, IL, US',
    'New York',
    'New York 123',
    '234 New York',
];

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

const formGroup = new FormGroup({
    inputDropdown: new FormControl(undefined, [Validators.required]),
    getAddress: new FormControl(null, [Validators.required]),
    receivedAddressList: new FormControl({
        addresses: addressList,
    }),
});

const formAddressTemplate: string = `
  <form style='width: 400px' [formGroup]="form">
   {{ form.get("getAddress").valid}}
    <ca-input-address-dropdown-test
      formControlName="getAddress"
      [placeholderType]="placeholderType"
      [receivedAddressData]="receivedAddressData"
      [receivedAddressList]="form.get('receivedAddressList').value"
      [inputConfig]="inputConfig"
      [commandHandler]="commandHandler"
      [isRouting]="isRouting"
      [closedBorder]="closedBorder"
      [incorrectValue]="incorrectValue"
      [hideEmptyLoaded]="hideEmptyLoaded"
      (selectedAddress)="selectedAddress($event)"
      (sentAddressData)="sentAddressData($event)"
      (sentAddressValue)="sentAddressValue($event)"
      (closeDropdown)="closeDropdown($event)"
      (commandEvent)="commandEvent($event)"
      (changeFlag)="changeFlag($event)"
      (incorrectEvent)="incorrectEvent($event)"
    ></ca-input-address-dropdown-test>
  </form>
`;

export const AddressByCity: Story = {
    args: {
        placeholderType: 'shortAddress',
        inputConfig: {
            name: 'Address',
            type: 'text',
            label: 'City, State Zip',
            isRequired: true,
            placeholderIcon: 'address',
            textTransform: 'capitalize',
            dropdownWidthClass: 'w-col-400',
            minLength: 6,
            maxLength: 256,
            isAddress: true,
        },
        receivedAddressData: {
            address: {
                city: 'Rosemont',
                state: 'Illinois',
                county: 'Cook County',
                address: '999 East Touhy Avenue, Rosemont, IL, US',
                street: 'East Touhy Avenue',
                streetNumber: '999',
                country: 'US',
                zipCode: '60018',
                stateShortName: 'IL',
                addressUnit: null,
            },
            valid: true,
            longLat: {
                longitude: -87.899204,
                latitude: 42.008594,
            },
        },
    },
    render: (args) => {
        setTimeout(() => {
            formGroup.get('getAddress')?.setValue({
                city: null,
                state: 'Maryland',
                county: 'Washington County',
                address: '59th New York, Washington County, MD, US',
                street: null,
                streetNumber: null,
                country: 'US',
                zipCode: null,
                stateShortName: 'MD',
                addressUnit: null,
            } as any); // ✅ Simulates user input
        }, 2000);
        return {
            props: {
                ...args,
                selectedAddress: (event: any) => {
                    console.log('SELECTED ADDRESS', event);
                },
                sentAddressData: (event: any) => {
                    setTimeout(() => {
                        formGroup.get('receivedAddressList')?.patchValue({
                            addresses: addressList.filter((item) => {
                                return item
                                    .toLowerCase()
                                    .includes(event.query.toLowerCase());
                            }),
                        });
                    }, 2000);
                },
                sentAddressValue: (event: any) => {
                    console.log('sentAddressValue');
                },
                closeDropdown: (event: any) => {
                    console.log('SELECTED ADDRESS');
                },
                form: formGroup,
            },
            template: formAddressTemplate,
        };
    },
};