import React from 'react';
import { connect } from 'react-redux';
import ComponentConfig from './Configuration';
import AlignConfiguration from './AlignConfiguration';
import ScreenConfig from './ScreenConfig';
import GroupConfig from './GroupConfig';
import PanelConfig from './PanelConfig';
import styles from './index.less';
import { isComponent, isGroup, isGeneralPanel } from 'utils/utils';
import { ConfigProvider } from '@easyv/react-gui';
import { uploadAssets } from 'utils/upload';
import { getTopScreenId } from 'utils/screen';
import ComponentEditModal from '../ComponentEditModal';
import http from 'utils/fetch';
import { api } from 'constants/config';

const getRemoteScreens = () => {
  return http.get(api.remoteScreenList);
};

const getRemoteComponents = (screenId) => {
  return http.get(api.remoteComponentList, {
    id: screenId
  });
};

const getRemoteComponentConfig = ({ screenId, componentId }) => {
  return http.get(api.remoteConfig, {
    screen: screenId,
    component: componentId
  });
};

function Config({ id, collapsed, modalEdit, type, tenantId, screensById, panelsById, componentsById, pages, fonts }) {
  const screenId = getTopScreenId();
  return (
    <ConfigProvider
      assetsUrl={window.appConfig.ASSETS_URL}
      uploadBasePath={`data/${tenantId}/${screenId}`}
      screensById={screensById}
      panelsById={panelsById}
      componentsById={componentsById}
      fonts={fonts}
      pages={pages}
      screenId={screenId}
      stateId={id}
      onUpload={uploadAssets}
      getRemoteScreens={getRemoteScreens}
      getRemoteComponents={getRemoteComponents}
      getRemoteComponentConfig={getRemoteComponentConfig}
    >
      <div id="config-sider" style={{ display: collapsed ? 'none' : 'block' }} className={styles.container}>
        {
          // 场景模式
          modalEdit ? (
            <ComponentEditModal />
          ) : (
            (() => {
              switch (type) {
                case 'screen':
                  return <ScreenConfig />;

                case 'component':
                  return <ComponentConfig />;

                case 'group':
                  return <GroupConfig />;

                case 'panel':
                  return <PanelConfig />;

                case 'align':
                  return <AlignConfiguration />;

                default:
                  return null;
              }
            })()
          )
        }
      </div>
    </ConfigProvider>
  );
}

function mapStateToProps({ createApp, user, screensById, componentsById, panelsById, interactionEdit, fonts }) {
  const { id, layersSelected = [], rightCollapsed, modalEdit } = createApp;
  const { pages } = interactionEdit;
  const { userInfo } = user;
  const { tenantId } = userInfo;
  const addedFonts = fonts.list
    .map((d) => ({ name: d.name, value: d.name }))
    .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));

  const layerId = layersSelected[0];
  const type = (() => {
    switch (layersSelected.length) {
      case 0:
        return 'screen';
      case 1:
        if (isComponent(layerId)) {
          return 'component';
        } else if (isGroup(layerId)) {
          return 'group';
        } else if (isGeneralPanel(layerId)) {
          return 'panel';
        } else {
          return '';
        }
      default:
        return 'align';
    }
  })();

  return {
    id,
    type,
    modalEdit,
    collapsed: rightCollapsed,
    tenantId,
    screensById,
    componentsById,
    panelsById,
    pages,
    fonts: addedFonts
  };
}

export default connect(mapStateToProps)(Config);
