import Vue from 'vue';
// @ts-ignore
import UIKitModalComponent from './UIKitModal.vue';
import type { UIKitModalOptions } from './type';
import { TUICallKitAPI } from '../../../../TUICallService/index';

let instance: any = null;

const isLocalEnvironment = (): boolean => {
  if (typeof window === 'undefined') return false;
  const host = window.location.hostname;
  return host === 'localhost' || host === '127.0.0.1' || host.startsWith('192.168.');
};

const cleanup = () => {
  if (instance) {
    const appendTo = document.body;
    if (instance.$el && instance.$el.parentNode) {
      appendTo.removeChild(instance.$el);
    }
    instance.$destroy();
    instance = null;
  }
};

const createUIKitModal = (options: UIKitModalOptions): Promise<{ action: string }> => new Promise((resolve) => {
  cleanup();

  const tim = TUICallKitAPI.getTim();
  if (tim && typeof tim.callExperimentalAPI === 'function') {
    const reportData = {
      id: options.id,
      title: options.title,
      type: options.type,
      content: options.content,
    };
    tim.callExperimentalAPI('reportModalView', JSON.stringify(reportData));
  }

  if (!isLocalEnvironment()) {
    resolve({ action: 'confirm' });
    return;
  }

  const handleAction = (action: 'confirm' | 'cancel') => {
    cleanup();
    resolve({ action });
  };

  const appendTo = document.body;
  // @ts-ignore
  const UIKitModalConstructor = Vue.extend(UIKitModalComponent);
  const modalInstance = new UIKitModalConstructor({
    propsData: {
      ...options,
      visible: true,
      onConfirm: () => {
        options.onConfirm?.();
        handleAction('confirm');
      },
      onCancel: () => {
        options.onCancel?.();
        handleAction('cancel');
      },
    },
  });

  modalInstance.$mount();
  appendTo.appendChild(modalInstance.$el);
  instance = modalInstance;
});

export const UIKitModal = {
  openModal: (config: UIKitModalOptions) => createUIKitModal(config),
};