import React, { useEffect, useState } from 'react';
import { Select, Divider, Modal, Button, Form, Input } from '@arco-design/web-react';
import { IconPlus } from '@arco-design/web-react/icon';

const FormItem = Form.Item;
const TextArea = Input.TextArea;
const Option = Select.Option;

interface EventSelectProps {
  eventList: any[];
  type: 'send' | 'listen';
  onUpdateData: (data) => void;
}

const typeMap = {
  send: 'EVENTSEND',
  listen: 'EVENTLISTENE'
};

const EventSelect: React.FC<EventSelectProps> = ({ eventList, type, onUpdateData }) => {
  const [options, setOptions] = useState<any[]>([]);
  const [form] = Form.useForm();
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    setOptions(eventList);
  }, [eventList]);

  const addItem = () => {
    setShowModal(true);
  };

  const saveForm = async () => {
    try {
      // TODO 需要对接事件新增的接口
      await form.validate();
      console.log('form:', form.getFields());
      setShowModal(false);
    } catch (e) {
    }
  };

  const handelSelect = (e) => {
    const data = {
      type: typeMap[type],
      customDef: {
        eventId: e.id,
        name: e.name,
        topic: e.topic
      }
    };
    onUpdateData(data);
  };

  return (
    <>
      <Select
        placeholder="请选择事件"
        onChange={(e) => handelSelect(e)}
        dropdownRender={(menu) => (
          <div>
            {menu}
            <Divider style={{ margin: 0 }} />
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                padding: '10px 12px',
                justifyContent: 'center'
              }}
            >
              <Button
                style={{ fontSize: 14, padding: '0 6px' }}
                type="text"
                size="mini"
                onClick={addItem}
              >
                <IconPlus />
                新增事件
              </Button>
            </div>
          </div>
        )}
        dropdownMenuStyle={{ maxHeight: 300 }}
      >
        {options.map((option) => (
          <Option key={option.id} value={option}>
            {option.name}
          </Option>
        ))}
      </Select>
      {showModal && (<Modal
        title="新增事件"
        visible={showModal}
        onOk={saveForm}
        onCancel={() => setShowModal(false)}
        autoFocus={false}
        focusLock={true}
      >
        <Form
          form={form}
          autoComplete="off"
        >
          <FormItem
            label="事件名称"
            field="name"
            required
            rules={[
              {
                validator(value, cb) {
                  if (!value) {
                    return cb('请填写事件名称');
                  }

                  return cb();
                }
              }
            ]}
          >
            <Input placeholder="请输入事件名称" />
          </FormItem>
          <FormItem
            label="事件标识"
            field="topic"
            required
            rules={[
              {
                validator(value, cb) {
                  if (!value) {
                    return cb('请填写事件标识');
                  }

                  return cb();
                }
              }
            ]}
          >
            <Input placeholder="请输入事件标识" />
          </FormItem>
          <FormItem
            label="事件描述"
            field="description"
          >
            <TextArea placeholder="请输入事件描述" />
          </FormItem>
        </Form>
      </Modal>)}
    </>

  );
};

export default EventSelect;