import { nextTick, onUnmounted, Ref, ref, watch, WritableComputedRef } from 'vue';
import { buildComponentArray } from './WindowManager';
import { ComponentModel } from './cykLang'
import loglevel from 'loglevel';
import { ComponentModelParameter, componentModelParameter } from './cykReact';
import { ObjectData } from '@cyklang/core';
const logger = loglevel.getLogger('GridComponent.vue');
logger.setLevel('debug');


export function useCykGrid(props: { componentArg: ComponentModel | undefined })
  : {
    isLoading: Ref<boolean>, components: Ref<ComponentModel[]>, visible: Ref<boolean>,
    title: WritableComputedRef<string>, subtitle: WritableComputedRef<string>,
    toolbarData: Ref<ObjectData | undefined>
  } {

  const cpVisible = new ComponentModelParameter<boolean>(props.componentArg, "visible", true)
  const visible = cpVisible.model

  const title = componentModelParameter<string>(props.componentArg, "title", "")
  const subtitle = componentModelParameter<string>(props.componentArg, "subtitle", "")


  const components: Ref<ComponentModel[]> = ref([]);
  const isLoading = ref(true);
  const toolbarData: Ref<ObjectData | undefined> = ref()

  const doLoading = async () => {
    try {
      if (!props.componentArg) return

      props.componentArg.objectData?.variables.forEach((namedVariable) => {
        const { variable } = namedVariable
        if (variable.data === undefined || variable.data === null) return;
        if (variable.data.type.name.toLocaleLowerCase() === 'toolbar') {
          // logger.debug('******* toolbar found')
          toolbarData.value = variable.data as ObjectData
        }
      })

      await buildComponentArray(props.componentArg, components);
      await props.componentArg.interpolateAttributes()
      for (let ind = 0; ind < components.value.length; ind++) {
        const component = components.value[ind]
        await component.interpolateAttributes()
      }
    }
    catch (err) {
      logger.error(err)
    }
    finally {
      isLoading.value = false;
    }
  };

  doLoading()

  watch (visible, () => {
    if (!visible.value) return
    isLoading.value = true
    nextTick( () => {
      doLoading()
    })
    
  })

  onUnmounted(() => {

    // if (props.componentArg !== undefined) props.componentArg.children = []
    props.componentArg?.objectData?.destroy()
    cpVisible.destroy()
  });
  return {
    components,
    isLoading,
    visible,
    title,
    subtitle,
    toolbarData
  };
}

export const GRID_ATTS = [
  'DISPLAY', 'BORDER', 'BORDER-RIGHT', 'BORDER-LEFT', 'BORDER-BOTTOM', 'BORDER-TOP',
  'GRID', 'GRID-TEMPLATE-COLUMNS', 'GRID-TEMPLATE-ROWS', 'GRID-AUTO-COLUMNS', 'GRID-AUTO-ROWS',
  'GRID-AUTO-FLOW', 'GRID-TEMPLATE-AREAS', 'GRID-TEMPLATE', 'GRID-GAP', 'GAP',
  'GRID-AREA', 'GRID-ROW-START', 'GRID-ROW-END', 'GRID-COLUMN', 'GRID-COLUMN-START', 'GRID-COLUMN-END',
  'FLEX', 'FLEX-GROW', 'FLEX-SHRINK', 'FLEX-BASIS',
  'FLEX-DIRECTION', 'FLEX-WRAP', 'FLEX-FLOW', 'JUSTIFY-CONTENT', 'ALIGN-ITEMS', 'ALIGN-CONTENT',
  'ORDER', 'ALIGN-SELF'
]

const GRID_ATTS_SET = new Set(GRID_ATTS);

// quasar spacing attributes

const SIZES = ['NONE', 'XS', 'SM', 'MD', 'LG', 'XL'];
const SPACE_ATTS = [
  'Q-MA', 'Q-MT', 'Q-MB', 'Q-ML', 'Q-MR', 'Q-MX', 'Q-MY',
  'Q-PA', 'Q-PT', 'Q-PB', 'Q-PL', 'Q-PR', 'Q-PX', 'Q-PY'
];

export const SPACING_ATTS: Array<String> = [];

SPACE_ATTS.forEach(att => {
  SIZES.forEach(size => {
    SPACING_ATTS.push(`${att}-${size}`);
  });
});

const SPACING_ATTS_SET = new Set(SPACING_ATTS)

/**
 * 
 * @param attributes 
 * @returns 
 */
export function getGridAttributes(attributes: any) {
  let result: any = {};
  if (attributes !== undefined) {
    for (let att in attributes) {
      if (GRID_ATTS_SET.has(att)) {
        result[att.toLowerCase()] = attributes[att];
      }
    }
  }
  // logger.debug('getGridAttributes()', attributes, result)
  return result;
}

/**
 * 
 * @param attributes 
 * @returns 
 */
export function getSpacingAttributes(attributes: any) {
  let result: string[] = [];
  if (attributes !== undefined) {
    for (let att in attributes) {
      if (SPACING_ATTS_SET.has(att)) {
        result.push(att.toLowerCase())
        // result[att.toLowerCase()] = attributes[att];
      }
    }
  }
  return result;
}

// export function getGridAttributes(attributes: any) {
//   let result: any = {}
//   if (attributes !== undefined) {
//     GRID_ATTS.forEach((ATT) => {
//       if (attributes[ATT] !== undefined) {
//         result[ATT.toLowerCase()] = attributes[ATT]
//       }
//     })
//   }
//   return result
// }