import {Component, OnInit} from '@angular/core';
import {AstuteClientService} from '../services/astute-client-service';

@Component({
    selector: 'app-customer',
    templateUrl: './customer.component.html',
    styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
    // @ViewChild('agGrid') agGrid;
    gridApi;
    gridColumnApi;
    contactGridApi;
    contactColumnApi;
    selected = null;
    customers;
    columnDefs = [
        {headerName: 'ID', field: 'customerId'},
        {headerName: 'Name', field: 'customerName', editable: true},
        {headerName: 'Bill To', field: 'billToDept', editable: true},
        {headerName: 'Address 1', field: 'add1', editable: true},
        {headerName: 'Address 2', field: 'add2', editable: true},
        {headerName: 'City', field: 'city', editable: true},
        {headerName: 'Email', field: 'email', editable: true},
        {headerName: 'Fax', field: 'fax', editable: true},
        {headerName: 'Phone', field: 'phone', editable: true},
        {headerName: 'Ext.', field: 'phExt', editable: true},
        {headerName: 'State', field: 'state', editable: true},
        {headerName: 'ZIP', field: 'zip', editable: true},
        {headerName: 'ZIP-4', field: 'ziplast4', editable: true}
    ];
    rowData: any;
    states = [
        'AL',
        'AK',
        'AR',
        'AZ',
        'CA',
        'CO',
        'CT',
        'DC',
        'DE',
        'FL',
        'GA',
        'HI',
        'IA',
        'ID',
        'IL',
        'IN',
        'KS',
        'KY',
        'LA',
        'MA',
        'MD',
        'ME',
        'MI',
        'MN',
        'MO',
        'MS',
        'MT',
        'NC',
        'NE',
        'NH',
        'NJ',
        'NM',
        'NV',
        'NY',
        'ND',
        'OH',
        'OK',
        'OR',
        'PA',
        'RI',
        'SC',
        'SD',
        'TN',
        'TX',
        'UT',
        'VT',
        'VA',
        'WA',
        'WI',
        'WV',
        'WY'
    ];
    usPhoneMask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];

    contactsData: any;
    contactsColDef = [
        {headerName: 'ID', field: 'contactId', checkboxSelection: true},
        {headerName: 'Name', field: 'name', editable: true},
        {headerName: 'Title', field: 'title', editable: true},
        {headerName: 'Email', field: 'email', editable: true},
        {headerName: 'Work', field: 'workPhone', editable: true},
        {headerName: 'Phone', field: 'mobile', editable: true},
        {headerName: 'Ext.', field: 'phExt', editable: true},
        {headerName: 'Fax', field: 'fax', editable: true},
        {headerName: 'Address', field: 'address', editable: true}
    ];

    // address: "123 Test Drive"
    // contactId: 1
    // customerId: "MDOT"
    // email: "Test@Test.com"
    // fax: 234123344
    // mobile: 1232343455
    // name: "John Shaw"
    // phExt: 1233
    // title: "Manager"
    // workPhone: 1231231233

    constructor(protected astuteClientService: AstuteClientService) {
    }

    ngOnInit() {
        this.refreshData();
    }

    // callback for grid selection
    setSelectedRow(event) {
        this.selected = event.data;
    }

    // wrappers for customer service methods
    addCustomer(customerId, name, billTo, add1, add2, city, state, zip, zip4, email, phone, phExt, fax, ref) {
        if (fax.length > 0 && fax.length < 14) {
            alert('Invalid fax.');
        } else if (phone.length > 0 && phone.length < 14) {
            alert('Invalid phone.');
        } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email) === false) {
            alert('You have entered an invalid email address!');
        } else {
            const customerData = {
                'customerId': customerId,
                'customerName': name,
                'billToDept': billTo,
                'add1': add1,
                'add2': add2,
                'city': city,
                'state': state,
                'zip': zip,
                'ziplast4': zip4,
                'email': email,
                'phone': phone,
                'phExt': phExt,
                'fax': fax
            };
            this.astuteClientService.createCustomer(customerData).then((data) => {
                if (data) {
                    this.refreshData();
                    ref.close();
                } else {
                    alert('Customer Creation Failed, Check Input Fields');
                }
            }, (reason) => {
                alert('Add customer failed: ' + reason);
            });
        }
    }

    editCustomer(id, name, billTo, add1, add2, city, state, zip, zip4, email, phone, phExt, fax, ref) {
        if (fax.length > 0 && fax.length < 14) {
            alert('Invalid fax.');
        } else if (phone.length > 0 && phone.length < 14) {
            alert('Invalid phone.');
        } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email) === false) {
            alert('You have entered an invalid email address!');
        } else {
            const customerData = {
                'customerId': id,
                'customerName': name,
                'billToDept': billTo,
                'add1': add1,
                'add2': add2,
                'city': city,
                'state': state,
                'zip': zip,
                'ziplast4': zip4,
                'email': email,
                'phone': phone,
                'phExt': phExt,
                'fax': fax
            };

            this.astuteClientService.updateCustomer(id, customerData).then((data) => {
                if (data) {
                    this.refreshData();
                    ref.close();
                } else {
                    alert('Customer Updating Failed, Check Input Fields');
                }
            }, (reason) => {
                alert('Update customer failed: ' + reason);
            });
        }
    }

    deleteCustomer(customerId) {
        if (customerId) {
            if (confirm('Are you sure you want to delete customer, ' + customerId)) {
                this.astuteClientService.deleteCustomer(customerId).then((data) => {
                    if (data) {
                        console.log('Customer, ' + customerId + ' successfully deleted');
                        this.refreshData();
                    } else {
                        alert('Error in deleting; Customer, ' + customerId + ' has not been deleted');
                    }
                });
            }
        } else {
            alert('Choose a customer first!');
        }
    }

    // wrappers for contact service methods (only inline editing)
    createEmptyContact() {
        const newContactData = {
            address: '',
            customerId: this.selected.customerId,
            email: 'example@email.com',
            fax: null,
            mobile: null,
            name: '',
            phExt: null,
            title: '',
            workPhone: null
        };
        console.log(newContactData);
        this.astuteClientService.createCustomerContact(newContactData).then ((data) => {
            if (!data) {
                alert('Contact Creation Failed, Check Input Fields');
            } else {
                this.refreshContactData(this.selected.customerId);
            }
        }, (reason) => {
            alert('Create customer failed: ' + reason);
        });
    }

    deleteContact() {
        const selectedNodes = this.contactGridApi.getSelectedNodes();
        if (selectedNodes.length > 0) {
            if (confirm('Are you sure?')) {
                const selec = selectedNodes.map(node => node.data)[0];
                this.astuteClientService.deleteCustomerContact(selec.customerId, selec.contactId).then((data) => {
                    if (data) {
                        this.refreshContactData(selec.customerId);
                    } else {
                        alert('Contact Deletion Failed, Check Input Fields');
                    }
                }, (reason) => {
                    alert('Delete customer failed: ' + reason);
                });
            }
        } else {
            alert('Choose a contact first!');
        }
    }

    // for inline updating
    updateRow(event) {
        const eventData = event.data;
        console.log(eventData);
        if (eventData.fax.length > 0 && eventData.fax.length < 14) {
            alert('Invalid fax.');
        } else if (eventData.phone.length > 0 && eventData.phone.length < 14) {
            alert('Invalid phone.');
        } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(eventData.email) === false) {
            alert('You have entered an invalid email address!');
        } else {
            this.astuteClientService.updateCustomer(eventData.customerId, eventData).then((data) => {
                if (data) {
                    this.refreshData();
                } else {
                    alert('Customer Updating Failed, Check Input Fields');
                }
            }, (reason) => {
                alert('Update customer failed: ' + reason);
            });
        }
        this.refreshData();
    }

    updateContactRow(event) {
        console.log(event);

        const eventData = event.data;
        // if (eventData.fax % 10 < 14) {
        //     alert('Invalid fax.');
        // } else if (eventData.mobile % 10 < 14) {
        //     alert('Invalid phone.');
        // } else if (eventData.workPhone % 10 < 14) {
        //     alert('Invalid work phone.');
        // } else
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(eventData.email) === false) {
            alert('You have entered an invalid email address!');
        } else {
            this.astuteClientService.updateCustomerContact(eventData.customerId, eventData).then((data) => {
                if (!data) {
                    alert('Customer Updating Failed, Check Input Fields');
                } else {
                    this.contactsData = this.astuteClientService.getCustomerContacts(eventData.customerId);
                }
            }, (reason) => {
                alert('Update customer failed: ' + reason);
            });
        }
        this.contactsData = this.astuteClientService.getCustomerContacts(eventData.customerId);
    }

    // opening and closing modal-form components
    open(ref) {
        // this.getSelectedRows();
        if (this.selected) {
            this.contactsData = this.astuteClientService.getCustomerContacts(this.selected.customerId);
        }
        ref.open();
    }

    close(ref) {
        ref.close();
    }

    // refreshes corresponding data
    refreshData() {
        this.rowData = this.astuteClientService.getCustomers();
        this.selected = null;
        this.astuteClientService.getCustomers().then((data) => {
            this.customers = data;
        });
    }

    refreshContactData(customerId) {
        this.contactsData = this.astuteClientService.getCustomerContacts(customerId);
    }


    // on each grid ready: sets api's and enable auto-resizing
    onGridReady(evt) {
        this.gridApi = evt.api;
        this.gridColumnApi = evt.columnApi;
    }

    onContactGridReady(evt) {
        this.contactGridApi = evt.api;
        this.contactColumnApi = evt.columnApi;
    }

    resizeColumns(evt) {
        evt.columnApi.autoSizeAllColumns();
    }
}