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

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

  const handleOk = () => {
    if (!currnetItem) {
      message.error('请选择控件');
      return;
    }
    setCurrentItem(null);
    onOk?.(currnetItem);
  };
  const handleCancel = () => {
    setCurrentItem(null);
    onCancel?.();
  };
  return (
    <Modal open={visible} onCancel={handleCancel} onOk={handleOk}>
      <Row gutter={12} style={{ paddingTop: 20 }}>
        {COMPONENT_LIST.map((item) => (
          <Col span={8} key={item.componentName}>
            <div
              onClick={() => setCurrentItem(item)}
              style={{
                display: 'flex',
                justifyContent: 'flex-start',
                alignItems: 'center',
                border:
                  item == currnetItem ? '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;
