import React, { useEffect, useState } from 'react';
import styles from './style/compGrid.module.less';
import CompNode from './compNode';
import { complexData } from './test/tempData';
import { Input, Grid, Pagination } from '@arco-design/web-react';

const InputSearch = Input.Search;
const Row = Grid.Row;
const Col = Grid.Col;

interface CompGridProps {
  componentType: 'myComplex' | 'publicComplex';
}

const CompGrid: React.FC<CompGridProps> = ({ componentType }) => {
  const [currentComponentType, setCurrentComponentType] = useState('');
  const [compData, setCompData] = useState([]);
  useEffect(() => {
    setCurrentComponentType(componentType);
    setCompData(complexData[`${componentType}`]);
  }, [componentType]);

  return (
    <>
      <div className={styles['comp-grid-container']}>
        <InputSearch
          searchButton="搜索"
          placeholder="请输入名字"
          style={{ width: 350 }}
        />
        <Row style={{ marginBottom: 16 }}>
          {compData.map((v, i) => {
            return (
              <Col
                xs={12}
                sm={12}
                md={12}
                lg={6}
                xl={6}
                xxl={6}
                key={i}>
                <CompNode nodeData={v} />
              </Col>
            );
          })}
        </Row>
        <div className={styles['comp-grid-footer']}>
          <Pagination total={200} />
        </div>
      </div>
    </>
  );
};

export default CompGrid;