import React, { useEffect } from 'react';
import {
  QxBaseCondition,
  QxBaseConditionValueType,
} from '../qx-base-condition';
import { QxConditionSql, SqlType } from '../qx-condition-sql';
import { INode } from '../qx-flow-node-selector';

export const QxCondition: React.FC<QxConditionProps> = ({
  value,
  className,
  style,
  enabled = true,
  showAssignment = true,
  onChange,
  node,
  nodes
}) => {
  const handleChange = (opt: Partial<QxConditionValueType>) => {
    onChange?.(Object.assign({}, value, opt, { enabled }));
  };

  return (
    <div className={`qx-condition ${className}`} style={style}>
      <QxBaseCondition
        mode="condition"
        nodes={nodes}
        node={node}
        showAssignment={showAssignment}
        value={value?.operators}
        onChange={(condition) => {
          handleChange({
            operators: condition,
          });
        }}
      />

      {(value?.operators?.length || 0) >= 2 ? (
        <QxConditionSql value={value} onChange={handleChange} />
      ) : null}
    </div>
  );
};

export interface QxConditionValueType {
  /**
   * 是否启用条件
   */
  enabled?: boolean;
  /**
   * 条件组合类型
   */
  sqlType: SqlType;
  /**
   * 自定义条件表达式
   */
  expression: string;
  /**
   * 算子
   */
  operators: OperatorsType[];
}

export type OperatorsType = QxBaseConditionValueType;

export interface QxConditionProps {
  [key: string]: any;
  value?: QxConditionValueType;
  onChange?: (value: QxConditionValueType) => void;
  className?: string;
  style?: React.CSSProperties;
  node?: INode
  nodes?: INode[]
  showAssignment?: boolean
}