import { connect } from 'umi';
import React from 'react';
import './global.less';
import Router from '@/Frameworks/SysRouter';
import Os from '../Os';

window.GT_APP = new Os();
window.GT_APP.funcMain.setActive(true);
// window.GT_APP.funcLimitedSpace.setActive(true);

const Home: React.FC = (props: any) => {
  const {
    page: { active, zoomOutList },
    dispatch,
  } = props;
  const zoomOut = (index: number, options: GT.IPageOptions) => {
    dispatch({
      type: 'page/zoomOut',
      payload: { index, options },
    });
  };
  const zoomIn = (index: number) => {
    dispatch({
      type: 'page/zoomIn',
      payload: { index },
    });
  };

  const onClickPage = (index: number) => {
    dispatch({
      type: 'page/setActive',
      payload: { index },
    });
  };

  return (
    <div
      style={{
        position: 'fixed',
        height: '100vh',
        width: '100vw',
        top: 0,
        left: 0,
      }}
    >
      <div>
        {active.map((aItem: GT.IActive, index: number) => {
          const { key, params = {}, id, options } = aItem;
          const Component = Router[key];
          if (!Component) {
            console.error(`key=${key} 不存在`);
            return <div>`key=${key} 不存在`</div>;
          }

          return (
            <Component
              options={options}
              key={id}
              id={id}
              params={params}
              zoomOut={(options: GT.IPageOptions) => zoomOut(index, options)}
              onActive={() => {
                onClickPage(index);
              }}
            />
          );
        })}
      </div>
      <ZoomOutList
        list={zoomOutList}
        zoomIn={(index: number) => zoomIn(index)}
      />
    </div>
  );
};

function ZoomOutList(props: { list: GT.IActive[]; zoomIn: Function }) {
  const { list, zoomIn } = props;

  return (
    <div
      style={{
        backgroundColor: '#66ccff',
        position: 'fixed',
        right: 20,
        bottom: 20,
        zIndex: 9999,
      }}
    >
      {list.map((item) => (
        <div
          style={{ padding: 10, borderBottom: '1px solid #fff' }}
          onClick={() => zoomIn(item)}
        >
          {item.options?.name}
        </div>
      ))}
    </div>
  );
}

export default connect(({ page }: { page: any }) => ({ page }))(Home);