import { useState, useEffect, useRef, useCallback } from 'react'
import { addDays, subDays } from 'date-fns'

interface UseRadarTileOptions {
}

interface RadarTileStatus {
    needRefresh: boolean;
    isLoading: boolean;
    isError: boolean;
    url: string | null;
}

interface RadarTile {
    needRefresh: boolean;
    isLoading: boolean;
    isError: boolean;
    url: string | null;
}

export function useRadarTile({
}: UseRadarTileOptions = {}) {

    const [imgBitmap, setImgBitmap] = useState<ImageBitmap | null>(null)

    const radarTileRef = useRef<RadarTile>({
        needRefresh: false,
        isLoading: false,
        isError: false,
        url: null,
    })

    const fetchRadarTile = async (url: string) => {

        radarTileRef.current.needRefresh = true
        radarTileRef.current.isError = false

        fetch(url).then(async (resp) => {
            radarTileRef.current.url = url
            const blob = await resp.blob()
            const newImgBitmap = await createImageBitmap(blob)
            console.log('Created new ImageBitmap:', newImgBitmap);
            setImgBitmap(newImgBitmap) // 使用 setState 更新状态
        }).catch((err) => {
            radarTileRef.current.isError = true
            console.error(err)
        })
    }

    return {
        imgBitmap,
        fetchRadarTile,
    }
}