import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import Loading from 'components/Loading';
import { useTitle } from 'components/easyUse';
import Header from './Header';
import LeftSider from './LeftSider';
import RightSider from '../screen-edit/components/ScreenConfig';
import Preview from '../screen-edit/components/ScreenPreview';
import { appActions } from './models';
import { getUserInfo } from 'models/user';
import { getMobileConstants } from 'models/mobile-constant';
import { getFonts } from 'models/font';
import { clearScreen, redirectScreen } from 'models/create-app';
import { getFilters } from 'models/filter';
import { getSources } from 'models/source';
import styles from './index.less';
import { getScreenId } from 'utils/screen';
import ScreenEditProvider from '../screen-edit/components/ScreenEditProvider';
import { ConfigProvider } from '@easyv/react-gui';
import EasyvRefresh from 'components/EasyvRefresh';

function InteractionProjectEdit({
  history,
  match,
  loading,
  getApp,
  getUserInfo,
  getFonts,
  getMobileConstants,
  getFilters,
  getSources,
  clearScreen,
  redirectScreen
}) {
  const {
    params: { appId, pageId, panelId, stateId }
  } = match;

  useTitle('终端交互编辑');

  useEffect(() => {
    getUserInfo();
    getFonts();
    getSources();
    getMobileConstants();
    getFilters(+appId, 'mobile');
    getApp(+appId);

    if (panelId && stateId) {
      redirectScreen(+stateId);
    } else {
      redirectScreen(+pageId);
    }
    return () => {
      clearScreen();
    };
  }, []);

  // 路由监听
  useEffect(() => {
    const unlisten = history.listen((location) => {
      const id = getScreenId(location.pathname);
      redirectScreen(id);
    });
    return () => {
      unlisten();
    };
  }, []);

  return (
    <ConfigProvider>
      <EasyvRefresh />
      <ScreenEditProvider>
        <div className={styles.container}>
          {loading && <Loading />}
          <Header />
          <div className={styles.content}>
            <LeftSider />
            <Preview />
            {/* <RightZoneBar /> */}
            <RightSider />
          </div>
        </div>
      </ScreenEditProvider>
    </ConfigProvider>
  );
}

function mapStateToProps({ interactionEdit }) {
  const { loading } = interactionEdit;

  return {
    loading
  };
}

const mapDispatchToProps = {
  getApp: appActions.getApp,
  getMobileConstants: getMobileConstants,
  clearScreen,
  getUserInfo,
  getFonts,
  redirectScreen,
  getFilters,
  getSources
};

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