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

export const FieldBaseType = {
  STRING: 'TEXT',
  DOUBLE: 'NUM',
  NUMBER: 'NUM',
  YEAR_SEC: 'DATE',
};

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

  const getDefaultCondition = (item: QxBaseConditionField) => {
    return {
      type: 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)}
        value={Object.assign(
          {},
          getDefaultCondition(item.field),
          props.value?.[key] || {},
        )}
        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;
}