import React from 'react';
import { QxBaseConditionItem } from '../qx-base-condition-item';
import { INode } from '../qx-flow-node-selector';
import './index.less';

export const flowTypeByFieldType: Record<string, string> = {
  STRING: 'STRING',
  TEXT: 'STRING',
  ENUM: 'ENUM',
  ENUM_MULTI: 'ENUM',
  YEAR_SEC: 'TIME',
  TIME: 'TIME',
  YEAR: 'TIME',
  YEAR_MONTH: 'TIME',
  YEAR_DATE: 'TIME',
  YEAR_MIN: 'TIME',
  YEAR_HOUR: 'TIME',
  HOUR: 'TIME',
  HOUR_MIN: 'TIME',
  HOUR_SEC: 'TIME',
  BOOL: 'BOOL',
  INTEGER: 'NUMBER',
  PERCENT: 'NUMBER',
  DECIMAL: 'NUMBER',
  DOUBLE: 'NUMBER',
  NUMBER: 'NUMBER',
  FILE: 'FILE',
  USER: 'USER',
  USER_MULTI: 'USER',
  ORG: 'ORG',
  ORG_MULTI: 'ORG',
  REL: 'FORM',
  REL_MULTI: 'FORM',
  TABLE: 'FORM',
  TREE: 'FORM'
};

export const FieldBaseType = {
  STRING: 'TEXT',
  DOUBLE: 'NUM',
  NUMBER: 'NUM',
  YEAR_SEC: 'DATE',
  TIME: 'DATE',
  YEAR: 'DATE',
  YEAR_MONTH: 'DATE',
  YEAR_DATE: 'DATE',
  YEAR_MIN: 'DATE',
  YEAR_HOUR: 'DATE',
  HOUR: 'DATE',
  HOUR_MIN: 'DATE',
  HOUR_SEC: 'DATE',
  PERCENT: 'NUM',
  DECIMAL: 'NUM',
  /**
   * 用户
   */
  USER: 'USER',
  /**
   * 多选用户
   */
  USER_MULTI: 'USER',
  ORG: 'ORG',
  ORG_MULTI: 'ORG',
  REL: 'FORM',
  REL_MULTI: 'FORM',
  TABLE: 'FORM',
  TREE: 'FORM',
  ENUM: 'ENUM',
  ENUM_MULTI: 'ENUM_MULTI',
};

export const QxBaseCondition: React.FC<QxBaseConditionProps> = (props) => {
  // const [localOptions, setLocalOptions] = useState(props.value || props.options || []);

  const getDefaultCondition = (item: QxBaseConditionField) => {
    return {
      type: flowTypeByFieldType[item.extract?.fieldType] || item.extract?.fieldType,
      code: item.code,
      title: item.name,
      opt: 'IS',
    };
  };

  const handleItemChange = (val: any, key: number) => {
    props.onChange?.(
      (props.value || [])?.map((item, idx) => {
        if (idx === key) return val;
        return props.value?.[idx]
          ? props.value?.[idx]
          : getDefaultCondition(item);
      }),
    );
  };

  const handleDelete = (key: number) => {
    if (props.value && Array.isArray(props.value)) {
      props.value.splice(key, 1);
      props.onChange?.([...props.value]);
    }
  };

  const getFieldGroupType = (fieldExtract: QxBaseConditionField['extract']) => {
    return (
      fieldExtract?.fieldGroupType ||
      FieldBaseType[fieldExtract.fieldType] ||
      fieldExtract?.fieldType ||
      'TEXT'
    );
  };

  const RenderCondition = props.value?.map((item, key) => (
    <div className="qx-base-condition-list-item" key={item.code || key}>
      {(props?.showIdx ?? true) && (
        <span className="qx-base-condition-list-item__idx">{key + 1}.</span>
      )}
      <QxBaseConditionItem
        key={item.code || key}
        mode={props.mode || 'condition'}
        {...item}
        fieldGroupType={getFieldGroupType(
          item.field?.extract || { fieldType: item.type },
        )}
        value={Object.assign(
          {},
          getDefaultCondition(item.field || props.value?.[key]),
          props.value?.[key] || {},
        )}
        fieldType={item?.field?.fieldType || item.type}
        nodes={props.nodes}
        node={props.node}
        subset={props.subset}
        showAssignment={props.showAssignment}
        onChange={(val) => handleItemChange(val, key)}
        remove={() => handleDelete(key)}
      />
    </div>
  ));

  return (
    <div className="qx-base-condition">
      <div className="qx-base-condition-list">{RenderCondition}</div>
    </div>
  );
};

export interface QxBaseConditionFieldExtract {
  widget: string;
  $base?: boolean;
  allowSelect?: boolean;
  fieldKey: string;
  fieldType: keyof typeof FieldBaseType;
  fieldGroupType?: string;
  relId?: string;
  [key: string]: any;
}

export interface QxBaseConditionField {
  name?: string;
  code: string;
  extract: QxBaseConditionFieldExtract;
}

export interface QxBaseConditionOptionsProps extends QxBaseConditionField {
  showValueAssignment?: boolean;
  isMultiple?: boolean;
  isRange?: boolean;
  [key: string]: any;
}

export type QxBaseConditionMode = 'condition' | 'variable';

export interface QxBaseConditionValueType {
  code: string;
  type: string;
  opt: string;
  mappingValues: string[];
  [key: string]: any;
}

export interface QxBaseConditionProps {
  showIdx?: boolean;
  mode: QxBaseConditionMode;
  value?: QxBaseConditionValueType[];
  onChange?: (val: any[]) => void;
  nodes?: INode[];
  node?: INode;
  subset?: boolean;
  showAssignment?: boolean;
}