import { reactive, computed, onActivated, onUnmounted, provide } from 'vue';
import { useRoute } from 'vue-router';
import MediaApi from '@/service/media';
import { HistoryVideoType } from '@/enums/app';
import indexDB from './indexDB';
import { dedupeTagDetails } from './common';
// import { showToast } from 'vant';

export default ({ id = '', dbType = HistoryVideoType.AcgImage }) => {
  const route = useRoute();
  const madieId = id || (route.query.id as string);
  //内容
  const state = reactive({
    info: {} as Types.Media.MediaInfo,
    episodeNumber: Number(route.query.episode) || 1,
    advsList: <any>[],
    timer: 0,
    isShowAdv: true,
    countdowner: <any>null,
  });

  const { historyData, historyEpisodeNumber, getHistoryData, setHistoryData } = indexDB(dbType, true);
  provide('historyData', historyData);
  const addHistory = (num = 0) => {
    const historyReadData = historyData.value.historyReadData || [];
    const obj = { ...historyData.value, ...state.info, historyReadData };
    if (num > 0) {
      obj.historyEpisodeNumber = num;
    }
    setHistoryData(obj, dbType);
  };

  onActivated(() => {
    if (!state.info.id) return;
    setTimeout(() => {
      getHistoryData(madieId);
    }, 500);
  });

  onUnmounted(() => {
    getHistoryData(madieId).then(() => {
      addHistory();
    });
  });

  const getData = async () => {
    await getHistoryData(madieId);
    const res = await MediaApi.getMediaInfo({ id: madieId });
    const info = res as Types.Media.MediaInfo;
    if (info.tagDetails?.length) {
      info.tagDetails = dedupeTagDetails(info.tagDetails);
    }
    state.info = info;

    addHistory();
    if (!historyData.value.id) {
      historyData.value = state.info;
    }
  };
  getData();

  const statusText = computed(() => {
    switch (state.info.updateStatus) {
      case 1:
        return '连载中';
      case 2:
        return '已完结';
      default:
        return '已完结';
    }
  });

  return {
    state,
    historyData,
    addHistory,
    historyEpisodeNumber,
    statusText,
  };
};