import { Injectable } from '@angular/core';
import { Utils } from '../../../utils/utils';
import { Observable, Subject } from 'rxjs';
import { cloneDeep, isNil } from 'lodash';
import { TOAST_DURATION } from '../../../utils/global.const';
import { STATUS_TOAST_TOP } from '../../../mockup';

@Injectable({
	providedIn: 'root',
})
export class ToastService {
	event = new Subject<any>();
	toasts = [];
	timeouts = [];

	exposeEvent = (): Observable<any> => {
		return this.event.asObservable();
	};

	triggerEvent = (eventData: any) => {
		this.event.next(eventData);
	};

	// Add toast will return the new toast config with ID.
	// Use this new toast config to delete the toast.
	// Example Usage.
	// const newConfigWithId = this.toast.addToast(config);
	// setTimeout(() => this.toast.deleteToast(newConfigWithId), 3000);
	addToast = toast => {
		toast = this.handleToastCreation(toast);
		// done to comment the autoClose functionality
		// toast = this.enhanceToastWithAutoClose(toast);
		this.toasts = [...this.toasts, toast];
		this.triggerEvent({ type: 'refreshedToasts', toasts: this.toasts });

		if (toast.data.addTimeout) {
			this.toastTimeout(toast.data.toastTimeout, toast);
		}
		return toast;
	};

	// Revert Back the timeout changes
	// it should not be done here
	toastTimeout(time, toast): void {
		setTimeout(() => {
			this.deleteToast(toast);
		}, time);
	}

	handleToastCreation(toast) {
		switch (toast.type) {
			case 'multiButtonToast': {
				const toastConfig = {
					...toast,
					id: Utils.guid(),
					timerId: null,
					data: {
						...toast.data,
						buttons: toast.data.buttons.map(button => ({ ...button, id: Utils.guid() })),
						links: toast.data.links.map(link => ({ ...link, id: Utils.guid() })),
					},
				};
				return toastConfig;
			}
			default:
				return { ...toast, id: Utils.guid(), timerId: null };
		}
	}

	enhanceToastWithAutoClose(toast) {
		// checks for autoClose property, if does not exist or ef exists and true auto close it else dont.
		if (isNil(toast.autoClose) || toast.autoClose) {
			const timer = setTimeout(() => {
				this.deleteToast({ ...toast, timerId: timer });
			}, TOAST_DURATION);
			this.timeouts.push(timer);
			return { ...toast, timerId: timer };
		} else {
			return toast;
		}
	}

	deleteToast = toastToDelete => {
		this.toasts = this.toasts.filter(toast => toast.id !== toastToDelete.id);
		this.triggerEvent({ type: 'refreshedToasts', toasts: this.toasts });
		// done to comment the autoClose functionality
		// this.handleClearTimer(toastToDelete);
	};

	handleClearTimer(toastToDelete) {
		if (isNil(toastToDelete.autoClose) || toastToDelete.autoClose) {
			clearTimeout(toastToDelete.timerId);
			this.timeouts = this.timeouts.filter(timer => timer !== toastToDelete.timerId);
		}
	}

	deleteToasts = () => {
		this.toasts = [];
		this.triggerEvent({ type: 'refreshedToasts', toasts: this.toasts });
		// done to comment the autoClose functionality
		// this.handleClearTimers();
	};

	handleClearTimers() {
		this.timeouts.forEach(timer => {
			clearTimeout(timer);
		});
		this.timeouts = [];
	}

	updateToast = updatedToast => {
		this.toasts = this.toasts.map(toast => (updatedToast.id === toast.id ? updatedToast : toast));
		this.triggerEvent({ type: 'refreshedToasts', toasts: this.toasts });
		return updatedToast;
	};

	toggleDisabledState(config, state) {
		switch (config.type) {
			case 'multiButtonToast': {
				const newConfig = {
					...config,
					data: {
						...config.data,
						buttons: config.data.buttons.map(button =>
							button.id === state.id ? { ...button, disabled: !button.disabled } : button
						),
						links: config.data.links.map(link => (link.id === state.id ? { ...link, disabled: !link.disabled } : link)),
					},
				};
				this.updateToast(newConfig);
				break;
			}
		}
	}
  showSingleOrderAdjustToast(type, i18n, toastMessagesConfig, checked?) {
    const OrderToastConfig = cloneDeep(STATUS_TOAST_TOP);
    const data = OrderToastConfig.data;
    const icon = OrderToastConfig.data.icon;
    const message = (checked) ?  i18n['new-order-planner']['singleAdjustOrdersSelected'] :  i18n['new-order-planner']['singleAdjustOrdersUnSelected'];
    if (type === 'success') {
      OrderToastConfig.data = {
        ...data,
        container: { class: 'order-success' },
        content: {
          header: i18n[toastMessagesConfig['order-submit-success-title']],
          message,
          class: 'order-success-content',
        },
        icon: { ...icon, type: 'fa-check', class: 'order-success-icon' },
      };
	 if( toastMessagesConfig?.version === 'v2'){
		OrderToastConfig.version = 'v2';
		OrderToastConfig.data.container.class = 'success-status';
		OrderToastConfig.data.content.class = 'white-color';
	 } 
    } else {
      OrderToastConfig.data = {
        ...data,
        container: { class: 'order-error' },
        content: {
          header: i18n[toastMessagesConfig['order-submit-error-title']],
          message: i18n['new-order-planner']['singleAdjustOrdersError'],
          class: 'order-error-content',
        },
        icon: { ...icon, class: 'order-error-icon' },
        onClose: toastMessagesConfig.onClose,
      };
	  if( toastMessagesConfig?.version === 'v2'){
		OrderToastConfig.version = 'v2';
		OrderToastConfig.data.container.class = 'error-status';
		OrderToastConfig.data.content.class = 'white-color';
	 } 
    }
    return this.addToast(OrderToastConfig);
  }
  showOrderAdjustToast(type, i18n, toastMessagesConfig) {
    const OrderToastConfig = cloneDeep(STATUS_TOAST_TOP);
    const data = OrderToastConfig.data;
    const icon = OrderToastConfig.data.icon;

    if (type === 'success') {
      OrderToastConfig.data = {
        ...data,
        container: { class: 'order-success' },
        content: {
          header: i18n[toastMessagesConfig['order-submit-success-title']],
          message: i18n['new-order-planner']['adjustOrders'],
          class: 'order-success-content',
        },
        icon: { ...icon, type: 'fa-check', class: 'order-success-icon' },
      };
	  if( toastMessagesConfig?.version === 'v2'){
		OrderToastConfig.version = 'v2';
		OrderToastConfig.data.container.class = 'success-status';
		OrderToastConfig.data.content.class = 'white-color';
	 } 
    } else {
      OrderToastConfig.data = {
        ...data,
        container: { class: 'order-error' },
        content: {
          header: i18n[toastMessagesConfig['order-submit-error-title']],
          message: i18n['new-order-planner']['adjustOrdersError'],
          class: 'order-error-content',
        },
        icon: { ...icon, class: 'order-error-icon' },
        onClose: toastMessagesConfig.onClose,
      };
	  if( toastMessagesConfig?.version === 'v2'){
		OrderToastConfig.version = 'v2';
		OrderToastConfig.data.container.class = 'error-status';
		OrderToastConfig.data.content.class = 'white-color';
	 } 
    }
    return this.addToast(OrderToastConfig);
  }

	showOrderToast(type, i18n, toastMessagesConfig) {
		const OrderToastConfig = cloneDeep(STATUS_TOAST_TOP);
		const data = OrderToastConfig.data;
		const icon = OrderToastConfig.data.icon;

		if (type === 'success') {
			OrderToastConfig.data = {
				...data,
				container: { class: 'order-success' },
				content: {
					header: i18n[toastMessagesConfig['order-submit-success-title']],
					message: i18n[toastMessagesConfig['order-submit-success-msg']],
					class: 'order-success-content',
				},
				icon: { ...icon, type: 'fa-check', class: 'order-success-icon' },
			};
			if( toastMessagesConfig?.version === 'v2'){
				OrderToastConfig.version = 'v2';
				OrderToastConfig.data.container.class = 'success-status';
				OrderToastConfig.data.content.class = 'white-color';
			 } 
		} else {
			OrderToastConfig.data = {
				...data,
				container: { class: 'order-error' },
				content: {
					header: i18n[toastMessagesConfig['order-submit-error-title']],
					message: i18n[toastMessagesConfig['order-submit-error-msg']],
					class: 'order-error-content',
				},
				icon: { ...icon, class: 'order-error-icon' },
				onClose: toastMessagesConfig.onClose,
			};
			if( toastMessagesConfig?.version === 'v2'){
				OrderToastConfig.version = 'v2';
				OrderToastConfig.data.container.class = 'error-status';
				OrderToastConfig.data.content.class = 'white-color';
			 } 
		}
		return this.addToast(OrderToastConfig);
	}

  showResponseToast(type, toastMessagesConfig) {
  const OrderToastConfig = cloneDeep(STATUS_TOAST_TOP);
  const data = OrderToastConfig.data;
  const icon = OrderToastConfig.data.icon;

  if (type === 'success') {
    OrderToastConfig.data = {
      ...data,
      container: { class: 'order-success' },
      content: {
        header: toastMessagesConfig.header,
        message: toastMessagesConfig.message,
        class: 'order-success-content',
      },
      icon: { ...icon, type: 'fa-check', class: 'order-success-icon' },
    };
	
	if( toastMessagesConfig?.version === 'v2'){
		OrderToastConfig.version = 'v2';
		OrderToastConfig.data.container.class = 'success-status';
		OrderToastConfig.data.content.class = 'white-color';
	 } 
  } else {
    OrderToastConfig.data = {
      ...data,
      container: { class: 'order-error' },
      content: {
        header: toastMessagesConfig.header,
        message: toastMessagesConfig.message,
        class: 'order-error-content',
      },
      icon: { ...icon, class: 'order-error-icon' },
      onClose: toastMessagesConfig.onClose,
    };
	if( toastMessagesConfig?.version === 'v2'){
		OrderToastConfig.version = 'v2';
		OrderToastConfig.data.container.class = 'error-status';
		OrderToastConfig.data.content.class = 'white-color';
	 }
  }
  return this.addToast(OrderToastConfig);
  }
}