import React, { useState, useEffect } from 'react';
import { Collapse, Tag, Grid } from '@arco-design/web-react';
import { getLocalStorageData } from '@/utils/storage';
import CompNode from './compNode';

const CollapseItem = Collapse.Item;
const Row = Grid.Row;
const Col = Grid.Col;

interface CollapseBoxProps {
  componentType: string;
}

const CollapseBox: React.FC<CollapseBoxProps> = ({ componentType }) => {
  const [collapseData, setCollapseData] = useState([]);

  useEffect(() => {
    const data = getLocalStorageData('componentsData')[`${componentType}`];
    setCollapseData(data);
  }, [componentType]);

  return (
    <>
      <Collapse>
        {collapseData.map((v, i) => {
          return (
            <CollapseItem
              key={i}
              name={`${v.label}_${i}`}
              header={
                <span>
                  <span style={{ marginRight: 8 }}>{v.label}</span>
                  <Tag color="arcoblue">{v.children.length}</Tag>
                </span>
              }
            >
              <Row style={{ marginBottom: 16 }}>
                {v.children.map((v, i) => {
                  return (
                    <Col
                      xs={12}
                      sm={12}
                      md={12}
                      lg={6}
                      xl={6}
                      xxl={6}
                      key={i}>
                      <CompNode nodeData={v} />
                    </Col>
                  );
                })}
              </Row>
            </CollapseItem>
          );
        })}
      </Collapse>
    </>
  );
};

export default CollapseBox;

