import {
  BasicType,
  Data,
  Expression,
  FunctionData,
  ObjectData,
  PrimitiveData,
  Variables,
  XmlError,
} from '@cyklang/core';
import { ChangeWorker, ComponentModel, getDBManager, getVarValue, setVarValue, structure } from './cykLang'
import { ComponentModelParameter, componentModelParameter } from './cykReact';
import { computed, ref, watch, Ref, onUnmounted } from 'vue';
import loglevel from 'loglevel';
import { useCykLang } from './cykLang';
import { AlertException } from './cykRun';
import { ValueLabel } from '@cyklang/core/dist/KVTables';
const logger = loglevel.getLogger('SelectComponent.vue');
logger.setLevel('debug');

function buildOptionPair(
  data: Data,
  valueField?: string | undefined,
  labelField?: string | undefined
): {
  value: BasicType;
  label: string;
} {
  let value: BasicType,
    label = structure.scope.xlate('no add_label');

  let varValue = (data as ObjectData).variables.at(0)?.variable;
  let varLabel = (data as ObjectData).variables.at(1)?.variable;
  if (valueField !== undefined)
    varValue = (data as ObjectData).variables.getVariable(valueField);
  if (labelField !== undefined)
    varLabel = (data as ObjectData).variables.getVariable(labelField);

  if (
    varValue !== undefined &&
    varValue.data !== undefined &&
    varValue.data !== null
  ) {
    value = (varValue.data as PrimitiveData).value;
  }
  if (
    varLabel !== undefined &&
    varLabel.data !== undefined &&
    varLabel.data !== null
  ) {
    label = structure.scope.xlate(varLabel.getString() || 'no add_label');
  }
  return { value, label };
}

/**
 * 
 * @param options 
 * @param componentModel 
 * @param dataOptions 
 * @returns ValueLabel[]
 */
function parseOptions(
  // options: Ref<any[]>,
  componentModel: ComponentModel | undefined,
  dataOptions: Data | undefined | null
): ValueLabel[] {

  const result: ValueLabel[] = []

  if (componentModel === undefined || componentModel.objectData === undefined)
    throw 'parseOptions objectData undefined';

  const objectData = componentModel.objectData;

  // options.value.length = 0;

  // if (componentModel.objectData.tag.attributes.NULLABLE !== undefined) {
  //   result.push({ value: '', label: '' })
  //   // options.value.push({ value: '', label: '' })
  // }

  if (dataOptions === undefined || dataOptions === null) return result;

  const varElts = (dataOptions as ObjectData).variables;

  const valueField = objectData.variables.getString('option_value');

  const labelField = objectData.variables.getString('option_label');

  // logger.debug(
  //   '<select> label=' + objectData.tag.attributes.LABEL ||
  //   'no label' + ' options.length = ' + varElts.length()
  // );

  const currentData = componentModel.model?.data;
  let currentValue: BasicType;
  if (currentData !== undefined && currentData !== null) {
    currentValue = (currentData as PrimitiveData).value;
  }

  let found = false;

  for (let ind = 0; ind < varElts.length(); ind++) {
    const varElt = varElts.at(ind)?.variable;
    if (
      varElt === undefined ||
      varElt.data === undefined ||
      varElt.data === null
    )
      continue;
    const data = varElt.data;
    if (!data.type.isPrimitive()) {
      const { value, label } = buildOptionPair(
        varElt.data,
        valueField,
        labelField
      );
      // options.value.push({ value, label });
      result.push({ value, label })
      if (currentValue === value) found = true;
    } else {
      const value = (data as PrimitiveData).value;
      if (currentValue === value) found = true;
      // options.value.push(value);
      result.push({ value, label: String(value) })
    }
  }

  const addLabel = structure.scope.xlate(objectData.variables.getString('add_label'));
  if (addLabel !== undefined) {
    // options.value.push({ value: undefined, label: addLabel });
    result.push({ value: undefined, label: addLabel })
  }

  if (currentValue !== undefined && currentValue !== null && found === false) {
    if (componentModel.model !== undefined) {
      componentModel.model.data = undefined;
    }
  }

  return result
}

/**
 * 
 * @param props 
 * @returns 
 */
export function useCykSelect(props: { componentArg: ComponentModel | undefined }) {
  const { structure } = useCykLang();
  const debug_label =
    props.componentArg?.objectData?.tag.attributes.LABEL || 'no label';

  const isLoading = ref(true);

  const visible = componentModelParameter<boolean>(props.componentArg, "visible", true)

  const cpLocked = new ComponentModelParameter<boolean>(props.componentArg, "locked", false)
  const locked = cpLocked.model

  const disable = ref(false)

  const label = componentModelParameter<string>(props.componentArg, "label", structure.scope.xlate(props.componentArg?.objectData?.tag.attributes.LABEL))

  const p_options = props.componentArg?.objectData?.variables.getVariable('options')

  const labelFormat = props.componentArg?.objectData?.variables.getVariable('format')?.getString()

  // logger.debug(`*** labelFormat = ${labelFormat}`)


  // onchange

  let changeWorker: ChangeWorker | undefined

  const onchangeFunction = props.componentArg?.objectData?.variables.getFunction('onchange');
  if (onchangeFunction && props.componentArg?.objectData) {
    changeWorker = new ChangeWorker(onchangeFunction, props.componentArg?.objectData.scope)
  }

  const model = computed<string | number | undefined | null>({
    get() {
      // let result: string | number | null | undefined;
      const variable = props.componentArg?.model;
      if (!variable) {
        logger.debug('cykSelect.get() variable model undefined ')
      }
      const result = getVarValue(variable);
      return result;
    },

    set(nval) {
      logger.debug('====== Select ' + debug_label + ' set ');
      logger.debug(nval);

      const variable = props.componentArg?.model;
      if (variable !== undefined) {
        setVarValue(variable, nval);
      }

      const varAddFunction =
        props.componentArg?.objectData?.variables.getVariable('add_function');
      if (nval === undefined && varAddFunction !== undefined) {
        if (varAddFunction.data?.type.name === 'function') {
          const addFunction = varAddFunction.data as FunctionData;
          (async () => {
            const scope = props.componentArg?.objectData?.scope;
            if (scope !== undefined) {
              const newValueLabelPair = await addFunction.callFunction(
                new Variables(),
                scope
              );
              if (
                newValueLabelPair !== undefined &&
                newValueLabelPair.type.isObject() &&
                variable !== undefined
              ) {
                const objData = newValueLabelPair as ObjectData
                const json = objData.variables.json()
                options.value.push(json);
                model.value = json.value;
              }
            }
          })();
        }
      }

      // console.log(nval);
    },
  });

  if (
    props.componentArg !== undefined &&
    props.componentArg.model !== undefined && props.componentArg.dirtyManager
    && props.componentArg.objectData?.tag.attributes['IGNORE-DIRTY'] === undefined
  )
    props.componentArg.dirtyManager.registerVariable(
      props.componentArg.model,
      props.componentArg.objectData?.tag.attributes.LABEL || 'no label'
    );

  watch(model, () => {

    changeWorker?.onchangeRequired()

    if (
      props.componentArg === undefined ||
      props.componentArg.model === undefined
    )
      return;
    // logger.debug('/// Select.watch model ');
    props.componentArg.dirtyManager?.variableChanged(props.componentArg.model)
  });

  const slots = ref(new Map<string, string>());
  props.componentArg?.objectData?.tag.childs.forEach((child) => {
    if (child.name === 'TEMPLATE') {
      slots.value.set(child.attributes.NAME, child.getText());
    }
  });

  const rules: any[] = [];
  if (props.componentArg?.objectData?.tag.attributes.MANDATORY !== undefined) {
    rules.push(
      (val: any) =>
        (val !== undefined && val !== null && String(val) !== '') ||
        props.componentArg?.objectData?.tag.attributes.MANDATORY
    );
  }

  const options = ref(Array<any>());
  // let reactCompOptions: ReactListener;

  /**
   * 
   * @returns 
   */
  const doLoading = async () => {
    try {
      if (props.componentArg === undefined) return;

      if (visible.value === false) return;

      await props.componentArg.interpolateAttributes()

      let valueList: ValueLabel[]

      if (props.componentArg.objectData?.tag.attributes.PARENT_TABLE) {
        const dbManager = await getDBManager()
        await dbManager.addKVTable(props.componentArg.objectData.tag.attributes.PARENT_TABLE)

        valueList = dbManager.getValueLabelList(props.componentArg.objectData.tag.attributes.PARENT_TABLE)

      } else if (!p_options) {
        throw 'p_options undefined'
      } else {
        valueList = parseOptions(
          // options,
          props.componentArg,
          p_options.data
        );
      }

      options.value = []

      let nullable = false
      if (props.componentArg.objectData?.tag.attributes.NULLABLE !== undefined) {
        nullable = true
      }
      if (nullable) {
        options.value.push({ value: '', label: '' })
      }

      for (let ind = 0; ind < valueList.length; ind++) {
        const { value, label } = valueList[ind]
        if (value === undefined || value === null || value === '' || labelFormat === undefined || labelFormat.trim() === '') {
          options.value.push({ value, label })
        }
        else {
          let nlabel = labelFormat.replace(/\{0\}/g, String(value))
          nlabel = nlabel.replace(/\{1\}/g, label)
          options.value.push({ value, label: nlabel })
        }
      }

      if (locked.value) {
        disable.value = true
      }
      else {
        disable.value = false
      }

    }
    catch (err) {
      logger.error(err)
      throw err
    }
    finally {
      isLoading.value = false
    }
  }

  doLoading()

  /**
   * 
   */
  const listenOptions = async () => {

    isLoading.value = true
    await doLoading()
    isLoading.value = false
  }

  if (p_options) {
    p_options.addVariableListener(listenOptions)
  }

  watch([locked],
    () => {
      isLoading.value = true
      doLoading()
    })

  onUnmounted(() => {

    props.componentArg?.objectData?.destroy()
    if (p_options) {
      p_options.removeVariableListener(listenOptions)
    }
    cpLocked.destroy()
  });

  return { isLoading, options, visible, disable, label, model, slots, rules };
}