import { reactive } from "vue"
import { Track } from "./track"
import { error } from "./error"

export const state = reactive({
    tracks: new Array<Track>,
    isPopulating: false,
    async populate() {
        if (this.isPopulating) return
        this.isPopulating = true
        this.tracks = await Track.fetchAll()
        this.isPopulating = false
    },
    async taskCompleted(track: Track): Promise<Tick> {
        const result = await fetch(`/api/v1/tracks/${track.id}/ticked`, { method: "PATCH" })
        const body = await result.text()
        if (!result.ok) {
            error(body)
            throw new Error(`error setting tick for track ${track.id} ("${track.name}"): ${result.status} ${result.statusText}`)
        }
        const tick: Tick = JSON.parse(body)
        track.ticks = track.ticks ?? []
        track.ticks.push(tick)
        const tracks = this.tracks.map($track => track.id === $track.id ? track : $track)
        this.tracks = tracks
        return tick
    },
    async taskMarkedIncomplete(tick: Tick) {
        const { ok, status, statusText } = await fetch(`/api/v1/ticks/${tick.id}`, { method: 'DELETE' })
        if (!ok)
            error(`error deleting tick ${tick.id}: ${statusText} (${status})`)
    }
})