import { ref } from 'vue';
import { ICallParticipantInfo, IUserInfo } from './type';
import { TUIStore, StoreName, NAME, CallStatus, CallRole } from './TUICallService/index';

const callParticipantInfo = ref<ICallParticipantInfo>({
  selfInfo: { status: CallStatus.IDLE },
  allParticipants: [],
  speakerVolumes: [],
  networkQualities: [],
});

TUIStore?.watch(StoreName.CALL, {
  [NAME.CALL_ROLE]: _handleCallRoleChange,
  [NAME.CALL_STATUS]: _handleCallStatusChange,
  [NAME.LOCAL_USER_INFO]: _handleLocalUserInfoChange,
  [NAME.REMOTE_USER_INFO_LIST]: _handleRemoteUserInfoListChange,
});
function _handleCallRoleChange(value: CallRole) {
  callParticipantInfo.value.selfInfo.role = value;
}
function _handleCallStatusChange(value: CallStatus) {
  console.log(`callStatus change: ${value}`);

  callParticipantInfo.value.selfInfo.status = value;
  if (value === CallStatus.IDLE) {
    handleCallStatusToIdle();
  }
  if (value === CallStatus.CALLING || value === CallStatus.CONNECTED) {
    handleCallStatusToCalling();
  }
}
function _handleLocalUserInfoChange(value) {
  const { userId, nick = '', avatar = '', remark = '', isAudioAvailable, isVideoAvailable, volume } = value;
  const selfInfo: IUserInfo = {
    id: userId || '',
    name: nick,
    avatarUrl: avatar,
    remark: remark,
    isMicrophoneOpened: isAudioAvailable,
    isCameraOpened: isVideoAvailable,
  };

  callParticipantInfo.value.selfInfo = { ...callParticipantInfo.value.selfInfo, ...selfInfo };
}
function _handleRemoteUserInfoListChange(remoteUserInfoList) {
  callParticipantInfo.value.allParticipants = remoteUserInfoList.map(obj => {
    const { userId, nick = '', avatar = '', remark = '', isAudioAvailable, isVideoAvailable } = obj || {};
    const selfInfo: IUserInfo = {
      id: userId || '',
      name: nick,
      avatarUrl: avatar,
      remark: remark,
      isMicrophoneOpened: isAudioAvailable,
      isCameraOpened: isVideoAvailable,
    };
    return selfInfo;
  });
}


function getRoute(): string {
  // @ts-ignore
  const pages = getCurrentPages();
  return pages[pages.length - 1].route;
}
function handleCallStatusToCalling(): void {
  if (!wx.$globalCallPagePath || getRoute() === wx.$globalCallPagePath) return;
  wx.navigateTo({
    url: `/${wx.$globalCallPagePath}`,
    fail: () => console.error('navigateTo fail!')
  });
}
function handleCallStatusToIdle(): void {
  if (!wx.$globalCallPagePath || getRoute() !== wx.$globalCallPagePath) return;
  wx.navigateBack({
    fail: () => console.error('navigateBack fail!')
  });
}


function useCallParticipantState() {
  return {
    callParticipantInfo,
  };
}

export { useCallParticipantState };