import { message, Col, Modal, Row } from 'antd';
import React, { useState } from 'react';
import { COMPONENT_LIST } from './constant';

function ComponentLibrary(props) {
  const { visible, onCancel, onOk, addToTable } = props;
  const [currentItem, setCurrentItem] = useState(null);

  const handleOk = () => {
    if (!currentItem) {
      message.error('请选择控件');
      return;
    }
    setCurrentItem(null);
    onOk?.(currentItem);
  };
  const handleCancel = () => {
    setCurrentItem(null);
    onCancel?.();
  };
  return (
    <Modal open={visible} onCancel={handleCancel} onOk={handleOk}>
      <Row gutter={12} style={{ paddingTop: 20 }}>
        {COMPONENT_LIST.map((item) => {
          if (addToTable && item.props.label === '表格') {
            return null;
          }
          return (
            <Col span={8} key={item.componentName}>
              <div
                onClick={() => setCurrentItem(item)}
                style={{
                  display: 'flex',
                  justifyContent: 'flex-start',
                  alignItems: 'center',
                  border:
                    item === currentItem
                      ? '1px solid #1890FF'
                      : '1px solid #aaa',
                  width: '100%',
                  padding: '4px 12px',
                  cursor: 'pointer',
                  margin: '10px 0',
                }}
              >
                {item.icon}
                <span style={{ marginLeft: 8 }}>{item.props.label}</span>
              </div>
            </Col>
          );
        })}
      </Row>
    </Modal>
  );
}

export default ComponentLibrary;