import { State, usStates } from '../../../../data/usStates';
import template from './customer-address-modal.component.html';

export const CustomerAddressModalComponent: ng.IComponentOptions = {
	bindings: {
		resolve: '<',
		close: '&',
		dismiss: '&',
	},
	template,
	controller: class CustomerAddressModalController {
		static $inject = ['$http', 'Debug'];
		errors: string[] = [];
		type!: 'shipping' | 'billing';
		resolve!: {
			type: 'shipping' | 'billing';
			customerId: number;
		};
		customerId!: number;
		usStates: State[];
		address: any;
		addresses: unknown[];
		isAdding = false;
		isEditing = false;
		isConfirmingDeletion: boolean[];
		isStoring = false;
		isDeleting = false;
		isLoading = false;
		isUpdating = false;
		close: any;
		nextApiURL = localized.apiURL.replace('v1', 'v2');
		page = 1;

		constructor(private $http: ng.IHttpService, private Debug: any) {
			this.usStates = usStates;
		}

		$onInit() {
			this.type = this.resolve.type;
			this.customerId = this.resolve.customerId;
			this.indexAddresses();
		}

		add() {
			this.address = {};
			this.errors = [];
			this.isAdding = true;
			this.isEditing = false;
		}

		cancel() {
			this.address = {};
			this.errors = [];
			this.isAdding = false;
			this.isEditing = false;
			this.indexAddresses();
		}

		/**
		 * @param {Array} data
		 * @return {Array} Addresses with uppercase state property.
		 */
		convertUsStates(data: any[]) {
			return data.map((address) => {
				address.state = address.state.toLocaleUpperCase();
				return address;
			});
		}

		storeAddress() {
			this.isStoring = true;
			const url = `${this.nextApiURL}/admin/customers/${this.customerId}/addresses/`;
			const data = {
				...this.address,
				type: this.type,
			};

			this.$http
				.post(url, data)
				.then((response) => {
					if (!response.data.errors.length) {
						this.isAdding = false;
						this.indexAddresses();
					} else {
						this.errors = response.data.errors;
					}
				})
				.finally(() => {
					this.isStoring = false;
				});
		}

		edit(e: Event, address: any) {
			e.preventDefault();
			this.address = address;
			this.isEditing = true;
			this.isAdding = false;
		}

		destroyAddress(e: Event, address: any) {
			this.isDeleting = true;
			e.preventDefault();
			const url = `${this.nextApiURL}/admin/customers/${this.customerId}/addresses/${address.id}`;
			this.$http.delete(url).then(() => {
				this.address = {};
				this.isEditing = false;
				this.isDeleting = false;
				this.indexAddresses();
			});
		}

		indexAddresses() {
			this.isLoading = true;
			const url = `${this.nextApiURL}/admin/customers/${this.customerId}/addresses`;
			const config = {
				params: {
					type: this.type,
					page: this.page,
				},
			};
			this.$http
				.get(url, config)
				.then((response) => {
					this.addresses = response.data.addresses;
					this.addresses.data = this.convertUsStates(
						this.addresses.data
					);
				})
				.catch((error: Error) => {
					this.Debug.error(error);
				})
				.finally(() => {
					this.isLoading = false;
				});
		}

		ok() {
			this.close({ $value: 'close' });
		}

		setPage(page: number) {
			this.page = page;
			this.indexAddresses();
		}

		updateAddress() {
			this.isUpdating = true;
			const url = `${this.nextApiURL}/admin/customers/${this.customerId}/addresses/${this.address.id}`;
			const data = this.address;

			this.$http
				.put(url, data)
				.then((response) => {
					if (!response.data.errors.length) {
						this.isEditing = false;
						this.indexAddresses();
					} else {
						this.errors = response.data.errors;
					}
				})
				.finally(() => {
					this.isUpdating = false;
				});
		}
	},
};