import React from "react";
import { WeaFormItem, WeaHelpfulTip, WeaLocaleProvider, WeaSearchGroup, WeaTools } from "ecCom";
import { WeaSwitch } from "comsMobx";

const getKey = WeaTools.getKey;
const getLabel = WeaLocaleProvider.getLabel;

export const renderRuleForm = (form, condition, onChange) => {
  const { isFormInit } = form;
  const formParams = form.getFormParams();
  let group = [];
  isFormInit && condition && condition.map(c => {
    let items = [];
    c.items.map(fields => {
      items.push({
        com: (
          <WeaFormItem
            label={<div className="customFormLabel">
              <span>{fields.label}</span>
              {fields.tip && <WeaHelpfulTip width={200} title={getLabel(fields.tipLanId, fields.tip)}
                                            placement="topLeft"/>}
            </div>}
            labelCol={{ span: `${fields.labelcol}` }}
            wrapperCol={{ span: `${fields.fieldcol}` }} error={form.getError(fields)}
            tipPosition="bottom">
            <WeaSwitch
              fieldConfig={fields} form={form} formParams={formParams}
              onChange={v => !["INPUT", "INPUTNUMBER", "TEXTAREA"].includes(fields.conditionType) && onChange(v)}
              onBlur={v => ["INPUT", "INPUTNUMBER", "TEXTAREA"].includes(fields.conditionType) && onChange({ [getKey(fields)]: { value: v } })}
            />
          </WeaFormItem>),
        colSpan: 1,
        hide: fields.hide
      });
    });
    !_.isEmpty(items) && group.push(
      <WeaSearchGroup col={1} needTigger={true} showGroup={c.defaultshow} items={items} center={false}
                      title={c.title}
      />);
  });
  return group;
};