import React, { Suspense, useMemo, useState } from 'react';
import { connect } from 'react-redux';
import Screen from 'components/Screen';
import { Utils } from '@easyv/react-gui';
const { getValueFromConfig } = Utils;
import {
  ScreenProvider,
  ScreenDataProvider,
  DataContainerProvider,
  PanelDataProvider,
  ComponentDataProvider,
  FilterDataProvider,
  DraggableProvider,
} from 'components/Screen/Context';
import { LayersSelectedProvider } from 'components/Screen/EditContext';
import {
  getComponentData,
  updateModalConfig,
  updateAction,
  updateModalData,
  updateTriggers,
} from 'models/component';
import { emitCallback } from 'models/callback';
import DataContainer from 'components/DataContainer';
import { getTopScreenId } from 'utils/screen';
import { useAuth } from 'components/easyUse';

function ScreenContainer({
  id,
  layersSelected,
  screensById,
  componentsById,
  panelsById,
  emitCallback,
  dataContainers,
  filters,
  getComponentData,
  updateConfig,
  updateAction,
  updateTrigger,
  updateData,
  tenantId,
  focusLayers = [],
}) {
  const [editId, setEditId] = useState(null);
  const { checkAuth } = useAuth();
  const screenId = getTopScreenId();
  const dataFilterResult = dataContainers.filterResult;
  const dataContainerList = dataContainers.list.filter((d) => d.screenId === screenId);
  const screen = screensById[screenId];

  const isHide = screen
    ? getValueFromConfig(screen.config, ['style', 'defaultHide']) === false
      ? false
      : true
    : true;

  return (
    <ScreenProvider
      getComponentData={getComponentData}
      updateConfig={updateConfig}
      emitCallback={emitCallback}
      updateAction={updateAction}
      updateTrigger={updateTrigger}
      updateData={updateData}
      layersSelected={layersSelected}
      tenantId={tenantId}
      isDefaultHide={isHide}>
      <ScreenDataProvider screensById={screensById}>
        <PanelDataProvider panelsById={panelsById}>
          <ComponentDataProvider componentsById={componentsById}>
            <DraggableProvider focusLayers={focusLayers}>
              <FilterDataProvider filters={filters}>
                <LayersSelectedProvider layersSelected={layersSelected}>
                  <DataContainerProvider dataFilterResult={dataFilterResult}>
                    <Suspense fallback="">
                      <Screen id={id} edit />
                    </Suspense>
                  </DataContainerProvider>
                </LayersSelectedProvider>
              </FilterDataProvider>
            </DraggableProvider>
          </ComponentDataProvider>
        </PanelDataProvider>
      </ScreenDataProvider>
      {dataContainerList.map((d) => {
        /**
         * 该组件处理数据容器
         * 1、定时更新
         * 2、回调变化
         */
        const currentFilters = d.useFilter
          ? d.filters
              .filter((f) => f.enable)
              .map((x) => filters.find((v) => v.id === x.id))
              .filter((d) => d)
          : [];
        const data = d.dataConfigs[d.dataType]?.data;
        return (
          <DataContainer
            filters={currentFilters}
            data={data}
            edit
            container={d}
            key={d.id}
            autoUpdate={d.autoUpdate}
          />
        );
      })}
    </ScreenProvider>
  );
}

const mapStateToProps = ({
  createApp,
  dataContainers,
  componentsById,
  screensById,
  panelsById,
  filters,
}) => {
  const { id, layersSelected, modalEdit, focusLayers = [] } = createApp;
  const screen = screensById[id] || {};
  return {
    id,
    tenantId: screen.tenantId,
    layersSelected,
    componentsById,
    screensById,
    panelsById,
    dataContainers,
    filters: filters.list,
    modalEdit,
    focusLayers,
  };
};

const mapDispatchToProps = {
  getComponentData,
  updateConfig: updateModalConfig,
  updateAction,
  updateTrigger: updateTriggers,
  emitCallback,
  updateData: updateModalData,
};

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