import request from '@/utils/request'
import { reactive, watch, type Ref } from 'vue'

export interface LinkInfo {
  background: string
  desc: string
  icon: string
  link: string
  name: string
}

export default function useLink(url: Ref<string>) {
  const info = reactive<LinkInfo>({
    background: '',
    desc: '',
    icon: '',
    link: '',
    name: ''
  })
  watch(
    url,
    (val) => {
      if (!val) return
      const tag = val.match(/(?<=http(s?):\/\/)[^/]*/g)?.[0] || val
      request<LinkInfo>('GET', `/api/app/pic/info/${tag}`).then((res) => {
        Object.assign(info, res)
      })
    },
    { immediate: true }
  )
  return info
}