import { Formik } from 'formik';
import { Modal, notification, Spin } from 'antd';
import BindResource from './BindResource';
import PropTypes from 'prop-types';
import { getMaxNumber } from '@/lib/util';
import { inject, observer } from 'mobx-react';

@inject('resource')
@observer
class ResourceFrom extends React.Component {
  static propTypes = {
    SetReasourceValue: PropTypes.func,
    type: PropTypes.oneOf(['inputs', 'ouputs']),
    visible: PropTypes.bool,
    modifyData: PropTypes.object,
    handleModalClose: PropTypes.func,
    update: PropTypes.bool,
    project: PropTypes.string,
    resource: PropTypes.object,
    setFieldValue: PropTypes.func,
    resourcesArr: PropTypes.array,
    workflowName: PropTypes.string,
  };

  static defaultProps = {
    type: 'inputs',
  };

  constructor(props) {
    super(props);
    const {
      visible,
      type,
      resource: { listResourceTypes },
    } = props;
    this.state = {
      visible,
      loading: true,
      bindInfo: {},
    };
    listResourceTypes(
      { operation: type === 'inputs' ? 'pull' : 'push' },
      data => {
        this.setBindInfo(data);
      }
    );
  }

  setBindInfo = data => {
    const { modifyData } = this.props;
    const list = _.get(data, 'items', []);
    const item = _.get(modifyData, 'type')
      ? _.find(list, o => _.get(o, 'spec.type') === _.get(modifyData, 'type'))
      : list[0];
    this.setState({ bindInfo: _.get(item, 'spec.bind'), loading: false });
  };

  componentDidUpdate(preProps) {
    const { visible } = this.props;
    if (visible !== preProps.visible) {
      this.setState({ visible });
    }
  }

  closeModal = () => {
    const { handleModalClose } = this.props;
    this.setState({ visible: false });
    handleModalClose && handleModalClose(false);
  };

  getInitialValues = list => {
    const { modifyData, resourcesArr, workflowName } = this.props;
    const item = _.get(modifyData, 'type')
      ? _.find(list, o => _.get(o, 'spec.type') === _.get(modifyData, 'type'))
      : list[0];
    const defaultName = `${workflowName}-rsc${getMaxNumber(resourcesArr) + 1}`;
    let data = {
      name: defaultName,
      path: '',
      type: _.get(item, 'spec.type'),
      ..._.pick(item, ['spec.parameters']),
    };
    if (!_.isEmpty(modifyData)) {
      modifyData.name = modifyData.name || defaultName;
      data = _.merge(data, modifyData);
    }
    return data;
  };

  submitResource = value => {
    const {
      SetReasourceValue,
      handleModalClose,
      update,
      project,
      modifyData,
      resource: { createResource, updateResource },
      setFieldValue,
      resourcesArr,
    } = this.props;
    const resourceObj = {
      metadata: { name: _.get(value, 'name') },
      ..._.pick(value, ['spec.parameters']),
    };
    const modifyResource = !_.isEmpty(modifyData);
    const defaultNameID = getMaxNumber(resourcesArr) + 1;
    if (update) {
      resourceObj.spec.type = _.get(value, 'type');
      if (!modifyResource) {
        createResource(project, resourceObj, () => {
          SetReasourceValue(value, modifyResource);
          resourcesArr.push(defaultNameID);
          setFieldValue('resourcesArr', resourcesArr);
        });
      } else if (!_.isEqual(value, modifyData)) {
        updateResource(project, _.get(value, 'name'), resourceObj, () => {
          SetReasourceValue(value, modifyResource);
          notification.success({
            message: intl.get('notification.updateResource'),
            duration: 2,
          });
        });
      }
    } else {
      SetReasourceValue(value, modifyResource);
      resourcesArr.push(defaultNameID);
      setFieldValue('resourcesArr', resourcesArr);
    }
    this.setState({ visible: false });
    handleModalClose(false);
  };
  render() {
    const {
      type,
      update,
      modifyData,
      resource: { resourceTypeList },
    } = this.props;
    const { visible, loading, bindInfo } = this.state;
    if (loading) {
      return <Spin />;
    }
    return (
      <Formik
        initialValues={this.getInitialValues(
          _.get(resourceTypeList, 'items', [])
        )}
        onSubmit={this.submitResource}
        render={props => (
          <Modal
            visible={visible}
            onCancel={this.closeModal}
            onOk={props.handleSubmit}
          >
            <BindResource
              {...props}
              type={type}
              update={update && !_.isEmpty(modifyData)}
              bindInfo={bindInfo}
            />
          </Modal>
        )}
      />
    );
  }
}

export default ResourceFrom;

@@ -1878,16 +1878,24 @@
 flowName
+, update
  %7D = thi
@@ -1895,32 +1895,33 @@
 %7D = this.props;%0A
+%0A
     const item =
@@ -2047,88 +2047,8 @@
 0%5D;%0A
-    const defaultName = %60$%7BworkflowName%7D-rsc$%7BgetMaxNumber(resourcesArr) + 1%7D%60;%0A
     
@@ -2072,27 +2072,18 @@
   name: 
-defaultName
+''
 ,%0A      
@@ -2177,24 +2177,25 @@
 '%5D),%0A    %7D;%0A
+%0A
     if (!_.i
@@ -2226,104 +2226,168 @@
     
-modifyData.name = modifyData.name %7C%7C defaultName;%0A      data = _.merge(data, modifyData)
+data = _.merge(data, modifyData);%0A    %7D%0A%0A    if (!update && data.name === '') %7B%0A      data.name = %60$%7BworkflowName%7D-rsc$%7BgetMaxNumber(resourcesArr) + 1%7D%60
 ;%0A    %7D%0A
     
@@ -2374,32 +2374,33 @@
 r) + 1%7D%60;%0A    %7D%0A
+%0A
     return data;
@@ -2838,66 +2838,8 @@
 a);%0A
-    const defaultNameID = getMaxNumber(resourcesArr) + 1;%0A
     
@@ -3042,52 +3042,8 @@
 e);%0A
-          resourcesArr.push(defaultNameID);%0A
     
@@ -3449,16 +3449,76 @@
  else %7B%0A
+      const defaultNameID = getMaxNumber(resourcesArr) + 1;%0A
       Se

edit resource in stage (#1097)