import React, { useCallback, useEffect } from 'react';
import { connect } from 'react-redux';
import Config from './Config';
import { updatePanel } from 'models/panel';
import { updateLayersKey, getScreen } from 'models/screen';
import { screenOperator } from 'utils/screen';
import { getScreens } from 'models/screens';
import { beforeScreenLink } from 'models/panel';
import { getId } from 'utils/interaction';
import EasyvConfigSpin from 'components/EasyvConfigSpin';
import { resetSelect } from 'models/create-app';

function PanelConfig({
  user,
  id,
  name,
  config,
  type,
  states = [],
  screens,
  course,
  hideDefault,
  updatePanel,
  updateLayersKey,
  screenState,
  getScreens,
  resetSelect,
  getScreen,
  beforeScreenLink,
  screenConfig,
}) {
  const handleChange = useCallback(
    (value) => {
      if (Object.prototype.hasOwnProperty.call(value, 'hideDefault')) {
        return updateLayersKey({
          values: [
            {
              id: type === 1 ? `ref_${id}` : `panel_${id}`,
              key: 'hideDefault',
              value: value.hideDefault,
            },
          ],
        });
      }
      if (Object.prototype.hasOwnProperty.call(value, 'states')) {
        if (value.states.length) {
          getScreen(value.states[0]);
        }

        return updatePanel({
          id,
          updateData: value,
        });
      }
      return updatePanel({
        id,
        updateData: { config: value },
      });
    },
    [updateLayersKey, type, id, updatePanel, getScreen],
  );

  useEffect(() => {
    if (id && type === 1 && screens.length === 0) {
      getScreens();
    }
  }, [id]);

  if (!id && screenState === 1) {
    // 正在加载
    return <EasyvConfigSpin />;
  }

  if (!id) {
    return <div style={{ padding: 12 }}>组件丢失</div>;
  }

  return (
    <Config
      user={user}
      key={id}
      id={id}
      type={type}
      resetSelect={resetSelect}
      name={name}
      course={course}
      states={states}
      screens={screens}
      config={config}
      hideDefault={hideDefault}
      onChange={handleChange}
      screenConfig={screenConfig}
      onBeforeScreenLink={beforeScreenLink}
    />
  );
}

const mapStateToProps = ({
  createApp,
  panelsById,
  screensById,
  screens,
  screenEdit,
  course,
  user,
}) => {
  const { id, layersSelected } = createApp;
  const layerId = getId(layersSelected[0]) as number;
  const panel = panelsById[layerId] || {};
  const screen = screensById[id];
  let hideDefault;
  if (screen) {
    const { layers } = screen;
    const layer = screenOperator.findLayerById(layersSelected[0], layers);
    if (layer) hideDefault = layer.hideDefault;
  }

  return {
    user: user,
    id: panel.id,
    name: panel.name,
    screenState: screenEdit.screenState,
    config: panel.config,
    type: panel.type,
    states: panel.states,
    screenConfig: panel.screenConfig,
    course,
    hideDefault,
    screens: screens.list.filter((d) => !d.deletedAt),
  };
};

const mapDispatchToProps = {
  updatePanel,
  updateLayersKey,
  getScreens,
  getScreen,
  resetSelect,
  beforeScreenLink,
};

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