import { type DateValue, parseDate } from '@internationalized/date'

function _useOptions() {
  const options = reactive({
    castBeginDate: '',
    castDayNo: -1,
    renderMode: 'heatmap' as 'heatmap' | 'image',
    isPlaying: false,
    mapping: {} as Record<string, string>,

  })
  const castBeginDate = ref<DateValue>()
  const castTargetDate = ref<DateValue>()

  const currentTcLoc = ref<null | [number, number][]>(null)
  type PosGetter = () => [number, number]
  const currentFocus = ref<null | PosGetter>(null)

  function getISOcastBeginDate() {
    const castBeginDateStr = options.castBeginDate.toString()
    if (castBeginDateStr.length !== 8) {
      console.error(castBeginDateStr)
      throw new Error('castBeginDate is invalid')
    }
    const newDateStr = `${castBeginDateStr.slice(0, 4)}-${castBeginDateStr.slice(4, 6)}-${castBeginDateStr.slice(6, 8)}`
    const castBeginDate = parseDate(newDateStr)
    return castBeginDate
  }

  function setCastBeginDate(date: DateValue) {
    const datestr = date.toString()
    options.castBeginDate = datestr.replaceAll('-', '')
  }

  function setTargetDate(date: DateValue) {
    const castBeginDateStr = options.castBeginDate.toString()
    if (castBeginDateStr.length !== 8) {
      console.error(castBeginDateStr)
      throw new Error('castBeginDate is invalid')
    }
    const newDateStr = `${castBeginDateStr.slice(0, 4)}-${castBeginDateStr.slice(4, 6)}-${castBeginDateStr.slice(6, 8)}`
    const castBeginDate = parseDate(newDateStr)
    const dayNo = date.compare(castBeginDate)
    options.castDayNo = dayNo
    return dayNo
  }

  async function refreshCurrentTcLoc() {
    currentTcLoc.value = null
    const q = new URLSearchParams()
    q.set('day', options.castDayNo.toString())
    const path = options.mapping[options.castBeginDate]
    q.set('path', path)
    const base = import.meta.env.VITE_BACKEND_URL

    const url = `${base}/tc/metadata/centroids?${q}`

    const resp = await baseFetch(url).json()

    const data = resp.data.value!
    currentTcLoc.value = data as [number, number][]
  }

  watch([castBeginDate, castTargetDate], () => {
    if (!castBeginDate.value || !castTargetDate.value) {
      return
    }
    setCastBeginDate(castBeginDate.value)
    setTargetDate(castTargetDate.value)
    refreshCurrentTcLoc()
  })

  return {
    options,
    setCastBeginDate,
    setTargetDate,
    getISOcastBeginDate,
    currentFocus,
    castBeginDate,
    castTargetDate,
    currentTcLoc,
  }
}

export const useOptions = createSharedComposable(() => _useOptions())