/*
 * @Author: yangzonglong
 * @Date: 2021-09-10 17:15:05
 * @version: v1.0.0
 * @Descripttion: 
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-09-14 09:19:28
 * @Auditor: 
 */
import React, { forwardRef, useImperativeHandle, useRef, useState, useEffect, useMemo } from 'react';
import { Form, Row } from 'antd';
import FormItem from './FormItem';
import { FormProps, FormRefProps, FormItemProps } from './interface';
import { getFormExtraValues, handFormItemsTempStr, handFormValues, handInitialValues } from './util';

const labelCol: { style: React.CSSProperties } = {
  style: { 
    width: '108px', 
    textAlign: 'left',
    paddingLeft: '16px'
  }
}

const Formx: React.ForwardRefRenderFunction<FormRefProps, FormProps> = (props, ref) => {
  const { extra, formItems, groupNumber, initialValues, onValuesChange, ...formProps } = props;
  const [form] = Form.useForm();
  const [_formItems, setFormItems] = useState<FormItemProps[]>([]);
  const extraValues = useRef<Record<string, any>>({});

  useImperativeHandle(ref, () => ({
    ...form,
    validateFields: async () => {
      const values = await form.validateFields();

      return values ? handFormValues(
        formItems,
        {
          ...values,
          ...extraValues.current
        }
      ) : values
    }
  }));

  useEffect(() => {
    setFormItems(handFormItemsTempStr(formItems, initialValues || {}))
  }, [formItems, initialValues]);

  function _onValuesChange(changedValues: Record<string, any>, allValues: Record<string, any>) {
    const formItemExtraData = getFormExtraValues();

    extraValues.current = {
      ...extraValues.current,
      ...allValues,
      ...formItemExtraData
    };

    setFormItems(handFormItemsTempStr(formItems, extraValues.current));
    form.setFieldsValue(extraValues.current);

    onValuesChange?.(changedValues, extraValues.current);
  };

  const _initialValues = useMemo(() => {
    return initialValues ? handInitialValues(formItems, initialValues) : initialValues
  }, [initialValues, formItems]);

  return (
    <Form
      labelCol={labelCol}
      {...formProps}
      form={form}
      onValuesChange={_onValuesChange}
      initialValues={_initialValues}>
      <Row>
        {_formItems.map(item => (
          <FormItem
            _extra={extra}
            groupNumber={groupNumber}
            key={item.name as string}
            {...item}
            required={item.required as boolean}
            rules={item.rules} />
        ))}
      </Row>
    </Form>
  )
}

export default forwardRef(Formx);