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 {
    imgBitmap: ImageBitmap | null;
    needRefresh: boolean;
    isLoading: boolean;
    isError: boolean;
    url: string | null;
}

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

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


    const fetchRadarTile = useCallback(async (url: string) => {
        radarTileRef.current.needRefresh = true
        radarTileRef.current.isError = false
        radarTileRef.current.url = url
    }, [])

    useEffect(() => {
        if (radarTileRef.current.needRefresh) {
            if (radarTileRef.current.url) {
                fetch(radarTileRef.current.url).then(async (resp) => {
                    const blob = await resp.blob()
                    const imgBitmap = await createImageBitmap(blob)
                    radarTileRef.current.imgBitmap = imgBitmap
                })
            }
        }
    }, [radarTileRef.current.needRefresh, fetchRadarTile])

    return {
        radarTileRef,
        fetchRadarTile,
    }
}