import {
  BasicType,
  DBTable,
  FunctionData,
  ObjectData,
  PrimitiveData,
  Tag,
  Variables,
  XmlError,
  variable2json,
} from "@cyklang/core";
import loglevel from "loglevel";
import { ComponentModel } from "./cykLang";
// import { dbRemote } from 'src/services/cyklang';
import { computed, onUnmounted, ref } from "vue";
import { useCykLang } from "./cykLang";
import { componentModelParameter } from "./cykReact";
import { AlertException } from "./cykRun";
import { useI18n } from "vue-i18n";
const logger = loglevel.getLogger("cykQimg.ts");
logger.setLevel("debug");

interface Derived {
  [key: string]: { width: number; height: number };
}
interface QimgParams {
  table_name?: string;
  field_name?: string;
  image_format?: string;
  id: BasicType;
  key: BasicType;
  width?: number;
  height?: number;
  max_dimension?: number;
  derived?: Derived;
  onchange?: FunctionData;
  // derived is a list of images computed from this image
  // ie field_name = image and img_size = { slide: {width: 2000; height: 500}, square: {width: 900, height: 900}}
  // database columns will be image, image_meta, image_slide, image_slide_meta, image_square, image_square_meta
}

const qimgOptions: { name: string; type: string }[] = [
  { name: "table_name", type: "string" },
  { name: "field_name", type: "string" },
  { name: "image_format", type: "string" },
  { name: "width", type: "number" },
  { name: "height", type: "number" },
  { name: "max_dimension", type: "number"},
  { name: "derived", type: "object" },
  { name: "id", type: "number" },
  { name: "key", type: "string" },
  { name: "onchange", type: "function" },
];

function parseOptions(componentArg: ComponentModel): QimgParams {
  const result: any = {};
  qimgOptions.forEach(({ name, type }) => {
    const optionVar = componentArg.objectData?.variables.getVariable(name);
    if (optionVar) {
      if (optionVar.dataType.name !== type) {
        AlertException(
          new XmlError(
            "qimg expect " +
              name +
              " of type " +
              type +
              " but received " +
              optionVar.dataType.name,
            componentArg.objectData?.tag || new Tag("")
          )
        );
      } else {
        if (optionVar.dataType.isPrimitive()) {
          result[name] = (optionVar.data as PrimitiveData)?.value;
        } else if (type === "function") {
          result[name] = optionVar.data as FunctionData;
        } else {
          // object
          result[name] = variable2json(optionVar);
        }
      }
    }

    if (!result.key && result.id) {
      result.key = String(result.id);
    }

  });
  // logger.debug('cykQimg.parseOptions -> ', result)
  return result;
}

// 13/08/2023
// model is a JSON meta of the image

export function useCykUploadImage(props: {
  componentArg: ComponentModel | undefined;
}) {
  const { structure, dbRemote } = useCykLang();
  const { t } = useI18n();
  const isLoading = ref(true);

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

  // let record: ObjectData
  const key = ref();
  const table_name = ref<string | undefined>();
  const field_name = ref<string | undefined>();
  const image_format = ref<string | undefined>();
  const cropWidth = ref<number | undefined>();
  const cropHeight = ref<number | undefined>();
  const max_dimension = ref<number | undefined>();
  const derived = ref<Derived | undefined>();
  const on_change = ref<FunctionData | undefined>();
  const image_path = ref<string>('');
  const size = ref(0);
  const format = ref('');
  const filename = ref('');

  (async () => {
    try {
      if (props.componentArg !== undefined) {
        await props.componentArg.interpolateAttributes();

        // const { table_name: _table_name, field_name: _field_name, record: _record, id: _id, width: _width, height: _height } = await parseParams(props.componentArg);
        const qimgParams: QimgParams = parseOptions(props.componentArg);
        table_name.value = qimgParams.table_name;
        field_name.value = qimgParams.field_name;
        image_format.value = qimgParams.image_format;
        key.value = qimgParams.key;
        cropWidth.value = qimgParams.width;
        cropHeight.value = qimgParams.height;
        max_dimension.value = qimgParams.max_dimension;
        derived.value = qimgParams.derived;
        on_change.value = qimgParams.onchange;

        if (props.componentArg.model) {
          const meta = variable2json(props.componentArg.model);
          if (meta) {
            table_name.value = meta.table_name;
            field_name.value = meta.field_name;
            key.value = meta.key;

            size.value = meta.size;
            format.value = meta.format;

            filename.value = `${table_name.value}-${encodeURIComponent(key.value)}.${format.value}`
          }
          // logger.debug('cykQimg.meta', meta, 'width.value', width.value, 'height.value', height.value, "props", props)
        }

        image_path.value = `${dbRemote.serverURL}/api/image/${table_name.value}/${encodeURIComponent(key.value)}/${field_name.value}?size=${size.value}`;

      } else {
        AlertException("cykQimg props.componentArg undefined");
      }
    } catch (err) {
      AlertException(err);
    }
  })().finally(() => {
    isLoading.value = false;
  });

  onUnmounted(() => {
    props.componentArg?.objectData?.destroy();
  });

  return {
    isLoading,
    visible,
    label,
    cropWidth,
    cropHeight,
    max_dimension,
    key,
    derived,
    table_name,
    field_name,
    image_format,
    on_change,
    image_path,
    size,
    format,
    filename
  };
}