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

const CollapseItem = Collapse.Item;

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>
              }
            >
              {v.children.map((v, i) => {
                return (
                  <div key={i}>
                    <Tag>{v.label}</Tag>
                  </div>
                );
              })}
            </CollapseItem>
          );
        })}
      </Collapse>
    </>
  );
};

export default CollapseBox;