import type { LineDevices, NdmDeviceResultVO } from '@/apis';
import { tryGetDeviceType, type DeviceType } from '@/enums';
import { useDeviceStore } from '@/stores';
import { watchDebounced } from '@vueuse/core';
import { storeToRefs } from 'pinia';
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

export const useDeviceSelection = () => {
  const route = useRoute();
  const router = useRouter();

  const deviceStore = useDeviceStore();
  const { lineDevices } = storeToRefs(deviceStore);

  const selectedStationCode = ref<string>();
  const selectedDeviceType = ref<DeviceType>();
  const selectedDevice = ref<NdmDeviceResultVO>();

  const initFromRoute = (lineDevices: LineDevices) => {
    const { stationCode, deviceType, deviceDbId } = route.query;
    if (stationCode) {
      selectedStationCode.value = stationCode as string;
    }
    if (deviceType) {
      selectedDeviceType.value = deviceType as DeviceType;
    }
    if (deviceDbId && selectedStationCode.value && selectedDeviceType.value) {
      const selectedDeviceDbId = deviceDbId as string;
      const stationDevices = lineDevices[selectedStationCode.value];
      if (stationDevices) {
        const devices = stationDevices[selectedDeviceType.value];
        if (devices) {
          const device = devices.find((device) => device.id === selectedDeviceDbId);
          if (device) {
            selectedDevice.value = device;
          }
        }
      }
    }
  };

  const selectDevice = (device: NdmDeviceResultVO, stationCode: string) => {
    selectedDevice.value = device;
    selectedStationCode.value = stationCode;
    const deviceType = tryGetDeviceType(device.deviceType);
    if (deviceType) {
      selectedDeviceType.value = deviceType;
    }
  };

  const routeDevice = (device: NdmDeviceResultVO, stationCode: string, to: { path: string }) => {
    const deviceDbId = device.id;
    const deviceType = tryGetDeviceType(device.deviceType);
    router.push({
      path: to.path,
      query: {
        stationCode,
        deviceType,
        deviceDbId,
        fromPage: route.path,
      },
    });
  };

  const syncToRoute = () => {
    const query = { ...route.query };
    // 当选中的设备发生变化时，删除fromPage参数
    if (selectedDevice.value?.id && route.query.deviceDbId !== selectedDevice.value.id) {
      delete query['fromPage'];
    }
    if (selectedStationCode.value) {
      query['stationCode'] = selectedStationCode.value;
    }
    if (selectedDeviceType.value) {
      query['deviceType'] = selectedDeviceType.value;
    }
    if (selectedDevice.value?.id) {
      query['deviceDbId'] = selectedDevice.value.id;
    }
    router.replace({ query });
  };

  watch(selectedDevice, syncToRoute);

  // lineDevices是shallowRef，因此需要深度侦听才能获取内部变化，
  // 而单纯的深度侦听又可能会引发性能问题，因此尝试使用防抖侦听
  watchDebounced(
    lineDevices,
    (newLineDevices) => {
      initFromRoute(newLineDevices);
    },
    {
      debounce: 500,
      deep: true,
    },
  );

  onMounted(() => {
    initFromRoute(lineDevices.value);
  });

  return {
    selectedStationCode,
    selectedDeviceType,
    selectedDevice,

    initFromRoute,
    selectDevice,
    routeDevice,
  };
};