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

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

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

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

const formTemplate: string = `
  <form style='width: 400px' [formGroup]="form">
    <app-ca-input-address-dropdown
      formControlName="inputDropdown"
      [placeholderType]="placeholderType"
      [activeAddress]="activeAddress"
      [receivedAddressData]="receivedAddressData"
      [receivedAddressList]="receivedAddressList"
      [inputConfig]="inputConfig"
      [commandHandler]="commandHandler"
      [isRouting]="isRouting"
      [closedBorder]="closedBorder"
      [incorrectValue]="incorrectValue"
      [hideEmptyLoaded]="hideEmptyLoaded"
      [addresList]="addresList"
      (selectedAddress)="selectedAddress($event)"
      (sentAddressData)="sentAddressData($event)"
      (sentAddressValue)="sentAddressValue($event)"
      (closeDropdown)="closeDropdown($event)"
      (commandEvent)="commandEvent($event)"
      (changeFlag)="changeFlag($event)"
      (incorrectEvent)="incorrectEvent($event)"
    ></app-ca-input-address-dropdown>
  </form>
`;

export const Default: Story = {
    render: (args) => ({
        props: {
            ...args,
            form: formGroup,
        },
        template: formTemplate,
    }),
    args: {
        placeholderType: '',
        activeAddress: null,
        receivedAddressData: null,
        receivedAddressList: null,
        inputConfig: {
            name: 'Address',
            type: 'text',
            label: 'Address, City, State Zip',
            isRequired: true,
            placeholderIcon: 'address',
            textTransform: 'capitalize',
            dropdownWidthClass: 'w-col-400',
            minLength: 6,
            maxLength: 256,
        },
        commandHandler: {
            commands: {
                firstCommand: {} as any,
                secondCommand: {} as any,
            },
        },
        isRouting: false,
        closedBorder: false,
        incorrectValue: false,
        hideEmptyLoaded: false,
        addresList: [],
    },
};

export const AddressByExactLocation: Story = {
    render: (args) => ({
        props: {
            ...args,
            form: formGroup,
        },
        template: formTemplate,
    }),
    args: {
        ...Default.args,
        placeholderType: 'longAddress',
        activeAddress: {
            id: 1,
            name: '999 East Touhy Avenue, Rosemont, IL, US',
        },
        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,
            },
        },
        receivedAddressList: {
            addresses: [
                '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',
            ],
        },
    },
};

export const AddressByCity: Story = {
    render: (args) => ({
        props: {
            ...args,
            form: formGroup,
        },
        template: formTemplate,
    }),
    args: {
        ...Default.args,
        placeholderType: 'shortAddress',
        activeAddress: {
            id: 1,
            name: 'Chicago, IL, US',
        },
        inputConfig: {
            name: 'Address',
            type: 'text',
            label: 'City, State Zip',
            isRequired: true,
            placeholderIcon: 'address',
            textTransform: 'capitalize',
            dropdownWidthClass: 'w-col-400',
            minLength: 6,
            maxLength: 256,
        },
        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,
            },
        },
        receivedAddressList: {
            addresses: [
                '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',
            ],
        },
    },
};

export const AddressWithParking: Story = {
    render: (args) => ({
        props: {
            ...args,
            form: formGroup,
        },
        template: formTemplate,
    }),
    args: {
        ...Default.args,
        placeholderType: 'shortAddress',
        activeAddress: {
            id: 1,
            name: 'Chicago, IL, US',
        },
        inputConfig: {
            name: 'Address',
            type: 'text',
            label: 'City, State Zip',
            isRequired: true,
            placeholderIcon: 'address',
            textTransform: 'capitalize',
            dropdownWidthClass: 'w-col-400',
            minLength: 6,
            maxLength: 256,
        },
        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,
            },
        },
        receivedAddressList: {
            addresses: [
                '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',
            ],
        },
        template: 'parking',
    },
};