import React from 'react';
import GalleryGroup from './GalleryGroup';
const chartTypes = ['柱形图', '折线图', '饼图', '散点图', '其他'];

function GalleryAll({ current, list, addComponent }) {
  const getChartAll = (list) => {
    const chart = list.concat();
    const chartAll: any = [];
    const popOne = (type) => {
      const index = chart.findIndex((v) => v.type === type);
      if (index > 0) {
        return chart.splice(index, 1)[0];
      }
    };
    chartTypes.forEach((d) => {
      const first = popOne(d);
      if (first) {
        chartAll.push(first);
      }

      const second = popOne(d);
      if (second) {
        chartAll.push(second);
      }
    });
    return chartAll.concat(chart);
  };
  return (
    <>
      {chartTypes.map((d) => {
        return (
          <span key={d} style={{ display: d === current ? 'block' : 'none' }}>
            <GalleryGroup list={list.filter((base) => base.type === d)} addComponent={addComponent}></GalleryGroup>
          </span>
        );
      })}
      <span style={{ display: current === '全部' ? 'block' : 'none' }}>
        <GalleryGroup list={getChartAll(list)} addComponent={addComponent}></GalleryGroup>
      </span>
    </>
  );
}

export default GalleryAll;
