import { useContext, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';

import { MiniAppContext } from '../../context/miniAppContext';
import { MiniAppAPI, MiniAppCBType } from '../../model/miniAppApi';
import { MiniAppErrorType, MiniAppError } from '../../model/miniAppError';
import { MiniAppView } from '../../model/miniAppView';
import msgHandler from '../../utils/iframe/messageHandler';

function useHelper() {
  const { t } = useTranslation();
  const { state, dispatch } = useContext(MiniAppContext);
  const [hasRefresh, setHasRefresh] = useState(false);
  const [navBarHeight, setNavBarHeight] = useState(
    localStorage.getItem('device') === 'iphonex' ? 88 : 64
  );

  const [ionAlertParams, setIonAlert] = useState({
    showAlert: false,
    title: '',
    text: '',
    button: [],
    completeCB: '',
    successCB: '',
    originId: '',
  });
  const [alertParams, setAlert] = useState({
    showAlert: false,
    title: '',
    text: '',
    buttonTitle: 'OK',
    successCB: '',
    failCB: '',
    completeCB: '',
    originId: '',
    alertBoxName: 'showAlert',
    imageUrl: '',
    screenshot: false,
    includeAppIconWhenShare: false,
  });
  const [updateParams, setUpdateParams] = useState({
    visible: false,
    successCB: '',
    originId: '',
  });
  const [actionSheetParams, setActionSheetParams] = useState({
    visible: false,
    ios: [],
    android: '',
    successCB: '',
    failCB: '',
    originId: '',
    mapbtnsArray: [{}],
    header: '',
  });
  const [showTabsParams, setShowTabs] = useState({
    visible: true,
    successCB: '',
    failCB: '',
    originId: '',
  });

  const setNavigationBarBackgroundColor = (data: any) => {
    try {
      if (data?.color) {
        dispatch({
          type: 'UPDATE_WINDOW',
          payload: { navigationBarBackgroundColor: data.color },
        });
        msgHandler(data.originId, data.successCB);
      } else {
        throw new MiniAppError(MiniAppErrorType.invalidJSAPIParams);
      }
    } catch (error) {
      MiniAppError.handleError(error, data);
    }
  };

  const setPageBackgroundColor = (data: any) => {
    try {
      if (data?.color) {
        dispatch({
          type: 'UPDATE_WINDOW',
          payload: { backgroundColor: data.color },
        });
        msgHandler(data.originId, data.successCB);
      } else {
        throw new MiniAppError(MiniAppErrorType.invalidJSAPIParams);
      }
    } catch (error) {
      MiniAppError.handleError(error, data);
    }
  };

  const setNavBarTitle = (data: any) => {
    try {
      if (data?.title) {
        dispatch({
          type: 'UPDATE_WINDOW',
          payload: { navigationBarTitleText: data.title },
        });
        msgHandler(data.originId, data.successCB);
      } else {
        throw new MiniAppError(MiniAppErrorType.invalidJSAPIParams);
      }
    } catch (error) {
      MiniAppError.handleError(error, data);
    }
  };

  const setNavBarTextStyle = (data: any) => {
    try {
      if (
        data?.style &&
        ['white', 'black'].indexOf(data.style.toLowerCase()) >= 0
      ) {
        dispatch({
          type: 'UPDATE_WINDOW',
          payload: { navigationBarTextStyle: data.style.toLowerCase() },
        });
        msgHandler(data.originId, data.successCB);
      } else {
        throw new MiniAppError(MiniAppErrorType.invalidJSAPIParams);
      }
    } catch (error) {
      MiniAppError.handleError(error, data);
    }
  };

  const setEnablePullDownRefresh = (data: any) => {
    try {
      if (typeof data?.enabled === 'boolean') {
        dispatch({
          type: 'UPDATE_WINDOW',
          payload: { enablePullDownRefresh: data.enabled },
        });
        msgHandler(data.originId, data.successCB);
      } else {
        throw new MiniAppError(MiniAppErrorType.invalidJSAPIParams);
      }
    } catch (error) {
      MiniAppError.handleError(error, data);
    }
  };

  const setAlertParams = (data: any) => {
    setAlert({
      showAlert: data.showAlert,
      title: data.title,
      text: data.text,
      buttonTitle: data.buttonTitle,
      successCB: data.successCB,
      failCB: data.failCB,
      completeCB: data.completeCB,
      originId: data.originId,
      alertBoxName: data.alertBoxName,
      imageUrl: data.imageUrl,
      screenshot: data.screenshot,
      includeAppIconWhenShare: data.includeAppIconWhenShare,
    });
  };

  const setActionSheet = (data: any, mapArray: any, header: string) => {
    setActionSheetParams({
      visible: mapArray.length > 0,
      ios: data?.payload?.ios,
      android: data?.payload?.android,
      successCB: data?.payload?.success,
      failCB: data?.payload?.fail,
      originId: data?.payload?.originId,
      mapbtnsArray: mapArray,
      header: header,
    });
  };

  const generateMapOptions = (data: any) => {
    let mapArray: any[] = [];
    data?.ios?.map(function (map: any) {
      return mapArray.push({
        text: map.label,
        handler: () => {
          if (map) {
            window.open(map.url, '_blank');
            msgHandler(data?.originId, data?.successCB);
          } else {
            msgHandler(data?.originId, data?.failCB);
          }
        },
      });
    });
    mapArray.push({
      text: 'Cancel',
      role: 'cancel',
      handler: () => {
        setActionSheetParams({
          ...actionSheetParams,
          visible: false,
        });
      },
    });
    return mapArray;
  };

  const startBiometricAuthentication = (data: any) => {
    let btnList = [
      {
        text: t('biometricSheet.authenticate'),
        handler: () => {
          msgHandler(data?.originId, data?.successCB, {
            isAuthenticated: true,
          });
        },
      },
      {
        text: t('biometricSheet.notsetupmsg'),
        role: 'destructive',
        handler: () => {
          msgHandler(data?.originId, data?.failCB, {
            errorCode: MiniAppErrorType.securityNotSetup,
          });
        },
      },
      {
        text: t('biometricSheet.lockmsg'),
        role: 'destructive',
        handler: () => {
          msgHandler(data?.originId, data?.failCB, {
            errorCode: MiniAppErrorType.securityTemporaryLocked,
          });
        },
      },
      {
        text: t('biometricSheet.cancel'),
        //role: 'cancel',
        handler: () => {
          msgHandler(data?.originId, data?.successCB, {
            isAuthenticated: false,
          });
        },
      },
    ];
    setActionSheet(data, btnList, t('biometricSheet.header'));
  };

  const setUpdateWarning = (data: any) => {
    setUpdateParams({
      successCB: data.successCB,
      originId: data.originId,
      visible: data.visible,
    });
  };

  const getTopBarHeight = (data: any) => {
    if (data?.successCB) {
      msgHandler(data.originId, data.successCB, { height: navBarHeight });
    }
  };

  const detectShakeMotion = (miniAppView: MiniAppView, data: any) => {
    if (data.originId === miniAppView.id) {
      miniAppView.callbacks.push({
        name: MiniAppAPI.detectShakeMotion,
        type: MiniAppCBType.complete,
        id: data.completeCB,
      });
    }
  };

  const setNavigationStyle = (data: any) => {
    try {
      if (['none', 'default', 'custom'].indexOf(data?.style) !== -1) {
        dispatch({
          type: 'UPDATE_WINDOW',
          payload: { navigationStyle: data?.style },
        });
        msgHandler(data?.originId, data?.successCB, {});
      } else {
        toast.error('Valid values for style are: none, default, custom');
        throw new MiniAppError(MiniAppErrorType.invalidData);
      }
    } catch (error) {
      MiniAppError.handleError(error, data);
    }
  };

  const setShowTabsVisibility = (data: any) => {
    if (typeof data?.visible === 'boolean') {
      setShowTabs({
        successCB: data?.successCB,
        originId: data?.originId,
        visible: data?.visible,
        failCB: data?.failCB,
      });
      msgHandler(data?.originId, data?.successCB);
    } else {
      msgHandler(data?.originId, data?.failCB, {
        errorCode: MiniAppErrorType.invalidData,
      });
    }
  };

  return {
    navbgColor:
      state.window?.navigationBarBackgroundColor || 'rgb(247,247,247)',
    setNavigationBarBackgroundColor,
    pageBackgroundColor: state.window?.backgroundColor || 'white',
    setPageBackgroundColor,
    navTitle: state.window?.navigationBarTitleText || '',
    setNavBarTitle,
    navBarTextColor: state.window?.navigationBarTextStyle,
    setNavBarTextStyle,
    enablePullDownRefresh: state.window?.enablePullDownRefresh,
    setEnablePullDownRefresh,
    alertParams,
    setAlertParams,
    updateParams,
    setUpdateWarning,
    actionSheetParams,
    setActionSheet,
    generateMapOptions,
    navBarHeight,
    setNavBarHeight,
    getTopBarHeight,
    detectShakeMotion,
    setNavigationStyle,
    ionAlertParams,
    setIonAlert,
    startBiometricAuthentication,
    showTabsParams,
    setShowTabsVisibility,
    hasRefresh,
    setHasRefresh,
  };
}

export default useHelper;