import React from 'react';
import { connect } from 'react-redux';
import { useLocalStorage } from 'components/easyUse';
import styles from './Setting.less';
import { getTopScreenId } from 'utils/screen';
import { updateTopScreen } from 'models/screen';

function Setting({ id, type, dataAlert, showLoading, updateTopScreen }) {
  const [value, setValue] = useLocalStorage('layerStick');

  const handleLayerStick = () => {
    setValue((prev) => !prev);

    // 通知用到localstorage layerStick的组件值的变化
    const event: any = new Event('layerStickChange');
    event.value = !value;
    window.dispatchEvent(event);
  };

  return (
    <ul className={styles.container}>
      {type === 'screen' && (
        <li className={styles.item} onClick={() => updateTopScreen({ id, dataAlert: !dataAlert })}>
          <span>数据异常告警提示</span>
          {dataAlert && <i className="icon iconfont icon-icon_sucess" />}
        </li>
      )}
      {type === 'screen' && (
        <li className={styles.item} onClick={() => updateTopScreen({ id, showLoading: !showLoading })}>
          <span>是否显示加载画面</span>
          {showLoading && <i className="icon iconfont icon-icon_sucess" />}
        </li>
      )}
      <li className={styles.item} onClick={handleLayerStick}>
        <span>图层选中置顶展示</span>
        {value && <i className="icon iconfont icon-icon_sucess" />}
      </li>
    </ul>
  );
}

const mapStateToProps = ({ screensById }) => {
  const id = getTopScreenId();
  const screen = screensById[id];
  let type = 'screen';
  let dataAlert;
  let showLoading;
  if (screen) {
    const { mobileId } = screen;
    dataAlert = screen.dataAlert;
    showLoading = screen.showLoading;
    if (mobileId) {
      type = 'mobile';
    }
  }

  return {
    id,
    type,
    dataAlert,
    showLoading
  };
};

const mapDispatchToProps = {
  updateTopScreen
};

export default connect(mapStateToProps, mapDispatchToProps)(Setting);
