import { ref, nextTick } from 'vue';

function useVirtualized() {
  const actualHeightContainerEl = ref(null);
  const translateContainerEl = ref(null);
  const scrollContainerEl = ref(null);
  const isMultiple = ref(false);
  const saveDATA = ref([]);
  const RenderedItemsCache = {};
  const getDom = (props) => {
    const getElements = (className) => {
      actualHeightContainerEl.value = document.querySelector(`${className} .el-scrollbar__view`);
      translateContainerEl.value = document.querySelector(`${className} .el-table__body`);
      scrollContainerEl.value = document.querySelector(`${className} .el-scrollbar__wrap`);
    };
    isMultiple.value = props.multiple;
    if (props.multiple) {
      getElements(".fm_select_table_multiple");
    } else {
      getElements(".fm_select_table_radio");
    }
  };
  const getItemHeightFromCache = (index) => {
    const val = RenderedItemsCache[index];
    return val === void 0 ? 50 : val;
  };
  const updateActualHeight = () => {
    let actualHeight = 0;
    saveDATA.value.forEach((_, i) => {
      actualHeight += getItemHeightFromCache(i);
    });
    actualHeightContainerEl.value.style.height = actualHeight + "px";
  };
  const updateOffset = (offset) => {
    if (translateContainerEl.value && translateContainerEl.value.style) {
      translateContainerEl.value.style.transform = `translateY(${offset}px)`;
    }
  };
  const updateRenderedItemCache = (index) => {
    const shouldUpdate = Object.keys(RenderedItemsCache).length < saveDATA.value.length;
    if (!shouldUpdate) return;
    nextTick(() => {
      const Items = Array.from(
        document.querySelectorAll(
          `${isMultiple.value ? `.fm_select_table_multiple` : `.fm_select_table_radio`} .el-table__row`
        )
      );
      Items.forEach((el) => {
        if (!RenderedItemsCache[index]) {
          RenderedItemsCache[index] = el.offsetHeight;
        }
        index++;
      });
      updateActualHeight();
    });
  };
  return {
    scrollContainerEl,
    updateRenderedItemCache,
    updateOffset,
    getDom,
    getItemHeightFromCache,
    saveDATA
  };
}

export { useVirtualized };
