import React, { useEffect, useState } from 'react';
import type { ValueAssignmentPopupProps } from '../qx-base-condition-item';
import { QxBaseConditionItem } from '../qx-base-condition-item';
import './index.less';

export enum FieldBaseType {
  STRING = 'TEXT',
  DOUBLE = 'NUM',
  YEAR_SEC = 'DATE',
}

export const rangeType = ['DOUBLE']
export const multipleType = ['STRING']

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

  const getDefaultConditionOptions = (item: QxBaseConditionField) => ({
    ...item,
    // @ts-ignore
    fieldGroupType: FieldBaseType[item.fieldType] || 'TEXT',
    mappingValues: [],
    opt: 'IS',
    valuesObj: [],
  });

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

  const handleDelete = (key: number) => {
    localOptions.splice(key, 1);
    setLocalOptions([...localOptions]);
  };

  useEffect(() => {
    setLocalOptions(props.options);
  }, [props.options]);

  const RenderCondition = localOptions?.map((item, key) => (
    <div className="qx-condition-list-item" key={item.code || key}>
      {(props?.showIdx ?? true) && (
        <span className="qx-condition-list-item__idx">{key + 1}.</span>
      )}
      <QxBaseConditionItem
        key={item.code || key}
        isMultiple={multipleType.includes(item.fieldType)}
        isRange={rangeType.includes(item.fieldType)}
        {...item}
        value={props.value?.[key] || getDefaultConditionOptions(item)}
        field={item}
        onChange={(val) => handleItemChange(val, key)}
        remove={() => handleDelete(key)}
        ValueAssignmentPopup={
          item.showValueAssignmentPopup ? props.ValueAssignmentPopup : undefined
        }
      />
    </div>
  ));

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

export interface QxBaseConditionField {
  field: string;
  fieldType: string;
  fieldName: string;
  qxProps?: string;
  extract?: any;
}

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

export interface QxBaseConditionProps {
  showIdx?: boolean;
  options: QxBaseConditionOptionsProps[];
  value: any[];
  onChange?: (val: any[]) => void;
  ValueAssignmentPopup?: React.FC<ValueAssignmentPopupProps>
}