import React from "react";
import { Button, Form, Input, Select, Space } from "antd";
import { PlusOutlined, WarningFilled } from '@ant-design/icons';
import './EventManager.less'

const formRef = React.createRef()
const SUPPORTED_EVENTS = [{ type: "click", label: "点击" }];
const SUPPORTED_ANIMATIONS = [{ type: "render", label: "跳转页面" }];
const SUPPORTED_PAGE = [{ type: "page1", label: "页面1" }];

export default class EventManager extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      events: [],
      editable: []
    };
  }

  addEvent () {
    let events = JSON.parse(JSON.stringify(this.state.events));
    let editable = JSON.parse(JSON.stringify(this.state.editable));
    events.push({
      eventName: "事件" + (events.length + 1),
      action: "click",
      eventConent: "render",
      selectedPanel: "page1"
    });
    editable.push(true);
    this.setState({
      events,
      editable
    });
  }

  removeEvent (eventIndex) {
    let events = JSON.parse(JSON.stringify(this.state.events));
    let editable = JSON.parse(JSON.stringify(this.state.editable));
    events.splice(eventIndex, 1);
    editable.splice(eventIndex, 1);
    this.setState({
      events,
      editable
    });
  }

  isShowEditForm (eventIndex, isShow) {
    let editable = JSON.parse(JSON.stringify(this.state.editable));
    editable[eventIndex] = isShow;
    this.setState({
      editable
    });
  }

  submit (eventIndex) {
    this.isShowEditForm(eventIndex, false);
    const newEvent = formRef.current.getFieldsValue().events;
    let events = JSON.parse(JSON.stringify(this.state.events));
    events[eventIndex] = newEvent[eventIndex];
    this.setState({
      events
    });
  }

  render() {
    const { events, editable } = this.state;
    return (
      <Space direction="vertical">
        <div className="warning">
          <WarningFilled />
          <span>当前组件暂不支持事件交互功能</span>
        </div>
        {/* <Form ref={formRef} name="dynamic_form" className="events-panel" autoComplete="off">
          <Form.List name="events" labelAlign="left">
            {(fields, { add, remove }) => {
              return (
                <div className="events">
                  {events.length > 0 && fields.map(field => {
                    return (
                    <Space className="event" key={field.key} direction="vertical">
                      <div className="event-buttons">
                        <div className="event-name">{events[field.name].eventName || "事件" + (field.name + 1)}</div>
                        <Button  
                          className="event-editButton"
                          type="primary"
                          size="small"
                          disabled={editable[field.name]}
                          onClick={() => this.isShowEditForm(field.name, true)}
                        >
                          编辑
                        </Button>
                        <Button
                          className="event-removeButton"
                          type="primary"
                          size="small"
                          onClick={() => {
                            remove(field.name);
                            this.removeEvent(field.name);
                          }}
                        >
                          删除
                        </Button>
                      </div>
                      {editable[field.name] && 
                        <Space direction="vertical">
                          <Form.Item
                            {...field}
                            label="事件名称"
                            name={[field.name, 'eventName']}
                            fieldKey={[field.fieldKey, 'eventName']}
                            initialValue={events[field.name].eventName || "事件" + field.name}
                          >
                            <Input />
                          </Form.Item>
                          <Form.Item
                            {...field}
                            label="触发行为"
                            name={[field.name, 'action']}
                            fieldKey={[field.fieldKey, 'action']}
                            initialValue={events[field.name].action || "click"}
                          >
                            <Select>
                              {SUPPORTED_EVENTS.map(({type, label}) => <Select.Option value={type}> {label} </Select.Option>)}
                            </Select>
                          </Form.Item>
                          <Form.Item
                            {...field}
                            label="事件内容"
                            name={[field.name, 'eventConent']}
                            fieldKey={[field.fieldKey, 'eventConent']}
                            initialValue={events[field.name].eventConent || "render"}
                          >
                            <Select>
                              {SUPPORTED_ANIMATIONS.map(({type, label}) => <Select.Option value={type}> {label} </Select.Option>)}
                            </Select>
                          </Form.Item>
                          <Form.Item
                            {...field}
                            label="选择页面"
                            name={[field.name, 'selectedPanel']}
                            fieldKey={[field.fieldKey, 'selectedPanel']}
                            initialValue={events[field.name].selectedPanel || "page1"}
                          >
                            <Select>
                              {SUPPORTED_PAGE.map(({type, label}) => <Select.Option value={type}> {label} </Select.Option>)}
                            </Select>
                          </Form.Item>
                          <Space size="large" align="center">
                            <Button
                              type="primary"
                              htmlType="submit"
                              onMouseDown={() => this.submit(field.name)}
                            >
                              确认
                            </Button>
                            <Button
                              type="primary"
                              onClick={() => this.isShowEditForm(field.name, false)}
                            >
                              取消
                            </Button>
                          </Space>
                        </Space>
                      }
                    </Space>
                  )})}

                  <Form.Item>
                    <Button 
                      className="add-event-button"
                      type="primary" 
                      icon={<PlusOutlined />} 
                      onClick={() => {
                        add();
                        this.addEvent();
                      }}
                      block
                      ghost
                    >
                      添加一个事件
                    </Button>
                  </Form.Item>
                </div>
              );
            }}
          </Form.List>
        </Form> */}
      </Space>
    )
  }
}
