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 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]);
    props.onChange?.([...localOptions]);
  };

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

  const RenderCondition = localOptions?.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}
        {...item}
        value={Object.assign(
          {},
          getDefaultConditionOptions(item),
          props.value?.[key] || {},
        )}
        field={item}
        onChange={(val) => handleItemChange(val, key)}
        remove={() => handleDelete(key)}
        ValueAssignmentPopup={
          item.showValueAssignmentPopup ?? true
            ? props.ValueAssignmentPopup
            : undefined
        }
      />
    </div>
  ));

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

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

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

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

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