import {
  ref,
  watch,
  computed,
  reactive,
  onMounted,
  CSSProperties,
  getCurrentInstance
} from "vue";
import { tagsViewsType } from "../types";
import { useEventListener } from "@vueuse/core";
import { useRoute, useRouter } from "vue-router";
import { useSettingStoreHook } from "@/store/modules/settings";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { isEqual, isBoolean, toggleClass, hasClass } from "@pureadmin/utils";

import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import CloseAllTags from "@iconify-icons/ri/subtract-line";
import CloseOtherTags from "@iconify-icons/ri/text-spacing";
import CloseRightTags from "@iconify-icons/ri/text-direction-l";
import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
import RefreshRight from "@iconify-icons/ep/refresh-right";
import Close from "@iconify-icons/ep/close";

export function useTags() {
  const route = useRoute();
  const router = useRouter();
  const instance = getCurrentInstance();
  const pureSetting = useSettingStoreHook();

  const buttonTop = ref(0);
  const buttonLeft = ref(0);
  const translateX = ref(0);
  const visible = ref(false);
  const activeIndex = ref(-1);
  const currentSelect = ref({});
  const multiTags: any = computed(() => {
    return useMultiTagsStoreHook().multiTags;
  });

  const tagsViews = reactive<Array<tagsViewsType>>([
    {
      icon: RefreshRight,
      text: "重新加载",
      divided: false,
      disabled: false,
      show: true
    },
    {
      icon: Close,
      text: "关闭当前标签页",
      divided: false,
      disabled: multiTags.value.length <= 1,
      show: true
    },
    {
      icon: CloseLeftTags,
      text: "关闭左侧标签页",
      divided: true,
      disabled: multiTags.value.length <= 1,
      show: true
    },
    {
      icon: CloseRightTags,
      text: "关闭右侧标签页",
      divided: false,
      disabled: multiTags.value.length <= 1,
      show: true
    },
    {
      icon: CloseOtherTags,
      text: "关闭其他标签页",
      divided: true,
      disabled: multiTags.value.length <= 2,
      show: true
    },
    {
      icon: CloseAllTags,
      text: "关闭全部标签页",
      divided: false,
      disabled: multiTags.value.length <= 1,
      show: true
    },
    {
      icon: Fullscreen,
      text: "整体页面全屏",
      divided: true,
      disabled: false,
      show: true
    },
    {
      icon: Fullscreen,
      text: "内容区全屏",
      divided: false,
      disabled: false,
      show: true
    }
  ]);

  function conditionHandle(item, previous, next) {
    if (isBoolean(route?.meta?.showLink) && route?.meta?.showLink === false) {
      if (Object.keys(route.query).length > 0) {
        return isEqual(route.query, item.query) ? previous : next;
      }
      return isEqual(route.params, item.params) ? previous : next;
    }
    return route.path === item.path ? previous : next;
  }

  const iconIsActive = computed(() => {
    return (item, index) => {
      if (index === 0) return;
      return conditionHandle(item, true, false);
    };
  });

  const linkIsActive = computed(() => {
    return item => {
      return conditionHandle(item, "is-active", "");
    };
  });

  const scheduleIsActive = computed(() => {
    return item => {
      return conditionHandle(item, "schedule-active", "");
    };
  });

  const getTabStyle = computed((): CSSProperties => {
    return {
      transform: `translateX(${translateX.value}px)`
    };
  });

  const getContextMenuStyle = computed((): CSSProperties => {
    return { left: buttonLeft.value + "px", top: buttonTop.value + "px" };
  });

  const closeMenu = () => {
    visible.value = false;
  };

  function getScheduleElement(index) {
    const refs = instance?.refs[`schedule${index}`];
    return Array.isArray(refs) ? refs[0] : refs;
  }

  function onMouseenter(index) {
    if (index) activeIndex.value = index;
    const scheduleEl = getScheduleElement(index);
    if (!scheduleEl || hasClass(scheduleEl, "schedule-active")) return;
    toggleClass(true, "schedule-in", scheduleEl);
    toggleClass(false, "schedule-out", scheduleEl);
  }

  function onMouseleave(index) {
    activeIndex.value = -1;
    const scheduleEl = getScheduleElement(index);
    if (!scheduleEl || hasClass(scheduleEl, "schedule-active")) return;
    toggleClass(false, "schedule-in", scheduleEl);
    toggleClass(true, "schedule-out", scheduleEl);
  }

  function onContentFullScreen() {
    pureSetting.hiddenSideBar
      ? pureSetting.changeSetting({ key: "hiddenSideBar", value: false })
      : pureSetting.changeSetting({ key: "hiddenSideBar", value: true });
  }

  watch(
    () => visible.value,
    () => {
      useEventListener(document, "click", closeMenu);
    }
  );

  return {
    route,
    router,
    visible,
    instance,
    multiTags,
    tagsViews,
    buttonTop,
    buttonLeft,
    translateX,
    pureSetting,
    activeIndex,
    getTabStyle,
    iconIsActive,
    linkIsActive,
    currentSelect,
    scheduleIsActive,
    getContextMenuStyle,
    closeMenu,
    onMounted,
    onMouseenter,
    onMouseleave,
    onContentFullScreen
  };
}
