import type { Block, Layout } from '@/layout/layout.types'
import useLayoutStore from '@/layout/useLayoutStore'
import useRouterStore from '@/useRouterStore'
import request from '@/utils/request'
import { defineStore } from 'pinia'
import { computed, reactive, ref, toRefs, watch } from 'vue'

interface UserInfo {
  id: string
  username: string
  gender: number
  birthday: string
  avatar: string
  openId: string
}
const defaultUserInfo: UserInfo = {
  id: '',
  username: '',
  gender: 0,
  birthday: '',
  avatar: '',
  openId: ''
}

function getLinkList(data: Layout) {
  const list = [] as Block[]
  for (const mode of data.content) {
    for (const page of mode.pages) {
      for (const item of page.list) {
        if (!item.link || item.link.startsWith('id:')) break
        list.push(item)
      }
    }
  }
  for (const item of data.dock) {
    if (item) list.push(item)
  }
  for (const dirItem of Object.values(data.dir)) {
    for (const item of dirItem.list) {
      list.push(item)
    }
  }
  return list
}
function areArraysEqualById(arr1: Block[], arr2: Block[]): boolean {
  if (arr1.length !== arr2.length) {
    return false;
  }

  // 将 arr2 转换为一个以 id 为键的映射
  const arr2Map = new Map(arr2.map(item => [item.id, item]));

  // 检查 arr1 中的每个 item 是否在 arr2 中存在，并且值是否相同
  for (const item1 of arr1) {
    const item2 = arr2Map.get(item1.id);
    if (!item2 || JSON.stringify(item1) !== JSON.stringify(item2)) {
      return false;
    }
  }

  return true;
}

export default defineStore('user', () => {
  const token = ref(localStorage.getItem('token') || '')
  const remoteData = ref<Layout | null>(null)
  const remoteAddList = ref<Block[]>([])

  const profile = reactive({ ...defaultUserInfo })
  const layout = useLayoutStore()

  const isLogin = computed(() => !!token.value && !!profile.id)

  watch(
    token,
    async (val) => {
      localStorage.setItem('token', val)

      if (!val) return
      const res = await request<UserInfo>('GET', '/api/profile')
      Object.assign(profile, res)
    },
    { immediate: true }
  )

  watch(
    token,
    async (val) => {
      if (!val) return
      console.log(val);

      const data = await request<Layout>('GET', '/api/backup')
      if (!data) return
      const remoteList = getLinkList(data)
      const localList = getLinkList(layout.state)
      const addList: Block[] = []
      for (const item of remoteList) {
        if (!localList.some((el) => el.id !== item.id)) {
          addList.push(item)
        }
      }
      if (addList.length > 0 || areArraysEqualById(remoteList, localList) || (remoteList.length !== localList.length)) {
        // TODO: 交给张阳
        remoteAddList.value = addList
        remoteData.value = data
        useRouterStore().go('global-backup')
      }
    },
  )
  const logout = () => {
    token.value = ''
    Object.assign(profile, { ...defaultUserInfo })
  }
  const comineData = () => {
    if (!remoteData.value) return
    Object.assign(layout.state.content[layout.state.currentPage].pages, remoteAddList.value)

  }
  const coverageData = () => {
    if (!remoteData.value) return
    console.log({ ...layout.state });
    console.log({ ...remoteData.value });

    Object.assign(layout.state, remoteData.value)

  }
  return {
    token,
    profile,
    isLogin,
    logout,
    coverageData,
    comineData
  }
})