import { bindDimension, containPoint } from 'utils/layer';
import { actionTypes } from 'constants/action-types';

const initialState = {
  visible: false,
  copyVisible: false,
  copyLoading: false,
  type: 'layer',
  top: 0,
  left: 0,
  layerOptions: []
};

const MENU_HEIGHT = 630;
const MENU_WIDTH = 112;

export function showContextMenu({ id: layerId, type, event }) {
  return (dispatch, getState) => {
    const { createApp, panelsById, componentsById, screensById } = getState();
    let { layersSelected } = createApp;
    const { id, scale } = createApp;
    const { layers } = screensById[id];
    const { clientX, clientY } = event;
    let x = 0,
      y = 0;
    const boundingClientRect = document.getElementById('m-simulator')?.getBoundingClientRect();
    if (boundingClientRect) {
      x = boundingClientRect.x;
      y = boundingClientRect.y;
    }
    const layersWithDimension = bindDimension({ layers, componentsById, panelsById });

    const layersContainPoint = containPoint({
      layers: layersWithDimension,
      point: { left: (clientX - x) / scale, top: (clientY - y) / scale }
    });
    // 当id不存在表示点击到空白区域或者被锁定图层区域，如果有选中的组件应当取消选择
    if (!layerId) {
      if (layersSelected.length) {
        layersSelected = [];
        dispatch({
          type: actionTypes.SELECT_RESET
        });
      }
    }
    // 如果右键的图层或者组件未被选中，则需要选中它
    if (layerId && layersSelected.indexOf(layerId) === -1) {
      layersSelected = [layerId];
      dispatch({
        type: actionTypes.LAYER_SELECT,
        payload: {
          selected: [layerId]
        }
      });
    }

    const visualHeight = document.body.clientHeight;
    const visualWidth = document.body.clientWidth;
    const top = layersSelected.length ? (clientY + MENU_HEIGHT > visualHeight ? visualHeight - MENU_HEIGHT : clientY) : clientY;
    const left = clientX + MENU_WIDTH > visualWidth ? clientX - MENU_WIDTH : clientX;

    dispatch({
      type: actionTypes.CONTEXT_MENU_SHOW,
      payload: {
        type,
        top: Math.round(top < 0 ? 0 : top),
        left: Math.round(left),
        layerOptions: layersContainPoint.concat()
      }
    });
  };
}

export function hideContextMenu() {
  return (dispatch, getState) => {
    const { createApp } = getState();
    const { contextMenu } = createApp;
    const { visible } = contextMenu;

    if (visible) {
      dispatch({
        type: actionTypes.CONTEXT_MENU_HIDE
      });
    }
  };
}

export function showCopyModal() {
  return {
    type: actionTypes.COPY_MODAL_SHOW
  };
}

export function hideCopyModal() {
  return {
    type: actionTypes.COPY_MODAL_HIDE
  };
}

export default function reducer(state = initialState, { type, payload }) {
  switch (type) {
    case actionTypes.CONTEXT_MENU_SHOW: {
      return { ...state, visible: true, ...payload };
    }

    case actionTypes.CONTEXT_MENU_HIDE: {
      return { ...state, visible: false };
    }

    case actionTypes.COPY_MODAL_SHOW: {
      return { ...state, copyVisible: true, visible: false };
    }

    case actionTypes.COPY_MODAL_HIDE: {
      return { ...state, copyVisible: false };
    }

    case actionTypes.CROSS_COPY_STATR: {
      return { ...state, copyLoading: true };
    }

    case actionTypes.CROSS_COPY_SUCCESS: {
      return { ...state, copyLoading: false, copyVisible: false };
    }

    case actionTypes.CROSS_COPY_FAILURE: {
      return { ...state, copyLoading: false };
    }
    default:
      return state;
  }
}
