<template>
    <h1 class="page-title">Tренировка</h1>
    <WorkoutItemComponent v-if="workoutItem"
        :workoutItem=workoutItem
        :data=data
        :mapCenter=mapCenter
        :lineCoordinates=lineCoordinates
        :dzenLink=dzenLink
        :isPrivate=false
    />
    <div v-else>
        <VaInnerLoading
            loading
            :size="60"
        >
        </VaInnerLoading>
    </div>
</template>
<script setup lang="ts">

import { AxiosError } from "axios";
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useToast } from "vuestic-ui/web-components";
import WorkoutItemComponent from "./components/WorkoutItem.vue";
import { WorkoutItem, ChartData } from "./Definitions.vue";
import { GetWorkout, InitWorkoutItem } from "./components/GetWorkout";



const { init } = useToast();
const route = useRoute()

const mapCenter = ref<Array<number>>([37.617644, 55.755819]);
const lineCoordinates = ref<Array<Array<number>>>([]);
const workoutItem = ref<WorkoutItem>();
const data = ref<ChartData>({
    labels: [],
    datasets: [],
})
const dzenLink = ref("");

const initWorkout = (id: string) => {
    GetWorkout(`/api/v0/public/workouts/${id}`).then((d: InitWorkoutItem) => {
        mapCenter.value = d.mapCenter;
        lineCoordinates.value = d.lineCoordinates;
        workoutItem.value = d.workoutItem;
        data.value = d.data;
        if (d.dzenLink != undefined) {
            dzenLink.value = d.dzenLink;
        }
    })
    .catch((error: AxiosError) => {
        console.log(error);
        init({
            message: "Что-то пошло не так.",
            color: "error",
        });
    });
};
initWorkout(route.params.id as string);
</script>



<style>
.page-title {
    color: #555;
}
</style>