/*
 * @Description: 自定义测试化用例
 * @Author: tangjiang
 * @Github:
 * @Date: 2019-11-27 19:46:14
 * @LastEditors  : tangjiang
 * @LastEditTime : 2019-12-26 20:07:35
 */
import './index.scss';
import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
import { Form, Input} from 'antd';
const FormItem = Form.Item;
const { TextArea } = Input;

/**
 * @description 初始化测试用例: 当有inputValue值时, 显示表单输入框，否则显示文本提示信息
 * @param {*} props
 *  props: {
 *    inputValue: '' // 初始值
 *    onDebuggerCode: func // 点击调试代码执行函数
 * }
 */
function InitTabCtx (props, ref) {
  // useImperativeHandle // 让子组件只暴露一定的api给父组件
  const tabRef = useRef(null);

  const { inputValue, onDebuggerCode } = props;

  // console.log('default value', inputValue);
  useImperativeHandle(ref, () => ({
    handleTestCodeFormSubmit: (cb) => {
      // console.log('父组件调用我啦~~~~~~~~~');
      _handleTestCodeFormSubmit(cb);
    }
  }));

  // useEffect(() => {
  //   console.log('初始值: ========', props);
  // }, [props]);

  // 渲染文本提示信息
  const renderText = () => (<span className={'ctx_default'}>请在这里添加测试用例，点击“调试代码”时将从这里读取输入来测试你的代码...</span>);
  // 渲染表单信息
  const renderForm = () => {
    const {form: { getFieldDecorator } } = props;
    return (
      <Form className={'user_case_form'}>
        <FormItem
          className={'input_area flex_l'}
        >
          {
            getFieldDecorator('input', {
              initialValue: inputValue
            })(<TextArea
                className="input_textarea_style"
                rows={8}
                placeholder="请填写测试用例的输入值，点击“调试代码”"
              />)
          }
        </FormItem>
      </Form>
    )
  }
  // 初始渲染内容
  const [renderCtx, setRenderCtx] = useState(() => {
    return function () {
      return renderText();
    };
  });

  // 输入值变化时更新渲染内容
  useEffect(() => {
    setRenderCtx(() => {
      return renderForm;
    });
  }, [inputValue]);

  const _handleTestCodeFormSubmit = (cb) => {
    const {form} = props;
    form.validateFields((err, values) => {
      if (!err) { // 表单验证通过时，调用测试接口
        cb && cb(); // 调用回调函数，切换 tab
        onDebuggerCode && onDebuggerCode(values);
      }
    });
  }

  return(
    <div ref={tabRef}>
      {renderCtx()}
    </div>
  )
}

export default Form.create()(forwardRef(InitTabCtx));