import React, { memo } from 'react';
import ComponentWrap from './ComponentWrap';
import GroupWrap from './GroupWrap';
import PanelWrap from './PanelWrap';
import { isGeneralPanel, isGroup } from 'utils/utils';

function Components({ layers }) {
  // 图层的顺序是按数组顺序显示的，即第一个显示在最上面，对应画布也应该是在图层的最上面，所以渲染顺序应该跟数组顺序相反

  return layers
    .concat()
    .reverse()
    .map((d) => {
      if (d.show === false) {
        return null;
      }

      const { id } = d;
      if (isGroup(id)) {
        return <GroupWrap key={id} {...d} />;
      } else if (isGeneralPanel(id)) {
        return <PanelWrap key={id} id={d.id} />;
      } else {
        return <ComponentWrap key={id} {...d} />;
      }
    });
}

export default memo(Components);
