<template>
    <div id="workout-container">
        <div id="workout-map">
            <yandex-map v-model="map" :settings="{
                location: {
                    center: mapCenter,
                    zoom: 9,
                },
            }" width="100%" height="350px">
                <yandex-map-default-scheme-layer />
                <yandex-map-default-features-layer />
                <yandex-map-feature :settings="{
                    geometry: {
                        type: 'LineString',
                        coordinates: lineCoordinates,
                    },
                    style: {
                        stroke: [{ color: '#007afce6', width: 4 }],
                    },
                }" />
                <yandex-map-default-marker v-if="currentCoordinates" :settings="{
                    coordinates: currentCoordinates,
                }" />
            </yandex-map>
        </div>
        <div id="workout-short-data">
            <div class="workout-item-editable-title">
                <h3>{{ workoutItem.name }}</h3>
                <VaIcon v-if="isPrivate" name="edit" @click="showModalTitle = !showModalTitle"/>
            </div>
            <div class="workout-item-params" v-if="workoutItem.workouted_at">
                <div class="workout-item-params-name">Дата:</div>
                <div class="workout-item-params-value">{{ formatTime(workoutItem.workouted_at) }}</div>
            </div>
            <div class="workout-item-params" v-if="workoutItem.distantion">
                <div class="workout-item-params-name">Расстояние:</div>
                <div class="workout-item-params-value">{{ distConvert(workoutItem.distantion) }} км</div>
            </div>
            <div class="workout-item-params" v-if="workoutItem.heart_rate">
                <div class="workout-item-params-name">Средний пульс:</div>
                <div class="workout-item-params-value">{{ Math.floor(workoutItem.heart_rate) }} уд./ мин.</div>
            </div>
            <div class="workout-item-params" v-if="workoutItem.max_heart_rate">
                <div class="workout-item-params-name">Максимальный пульс:</div>
                <div class="workout-item-params-value">{{ Math.floor(workoutItem.max_heart_rate) }} уд./ мин.</div>
            </div>
            <div class="workout-item-params" v-if="workoutItem.speed">
                <div class="workout-item-params-name">Средняя скорость:</div>
                <div class="workout-item-params-value">{{ speedConvert(workoutItem.speed) }} км / ч</div>
            </div>
            <div class="workout-item-params" v-if="workoutItem.max_speed">
                <div class="workout-item-params-name">Максимальная скорость:</div>
                <div class="workout-item-params-value">{{ speedConvert(workoutItem.max_speed || 0) }} км / ч</div>
            </div>
            <div class="workout-item-params" v-if="workoutItem.temperature">
                <div class="workout-item-params-name">Температура:</div>
                <div class="workout-item-params-value">{{ workoutItem.temperature }} °C</div>
            </div>
            <div class="workout-item-params" v-if="workoutItem.power">
                <div class="workout-item-params-name">Средняя мощность:</div>
                <div class="workout-item-params-value">{{ Math.floor(workoutItem.power) }} Вт</div>
            </div>
            <div class="workout-item-params" v-if="workoutItem.max_power">
                <div class="workout-item-params-name">Максимальная мощность:</div>
                <div class="workout-item-params-value">{{ Math.floor(workoutItem.max_power) }} Вт</div>
            </div>
            <div class="workout-item-params" v-if="isPrivate">
                <div class="workout-item-params-name">Сделать публичной:&nbsp;</div>
                <input type="checkbox" v-model="workoutItem.is_public" v-on:change="changePublic(workoutItem.is_public)">
            </div>
            <div class="workout-item-params" >
                <div class="workout-item-params-name">Ссылки на описание:</div>
                <div  v-if="dzenLink"><a :href="dzenLink" target="_blank">Дзен</a></div>
                <div class="workout-item-params-pointer" v-else><a @click="showModalLink = !showModalLink">Добавить</a>    </div>
            </div>

        </div>
    </div>
    <VaButton v-on:click="resetChartZoom()" preset="secondary" color="textPrimary" id="zoom-botton">
        <VaZoomOut />
    </VaButton>
    <!-- @vue-ignore -->
    <LineWithLineChart 
    id="chart" 
    ref="chart" 
    :options="chartOptions" 
    :plugins="chartPlugins" 
    :data="data" 
    pointerAxies="currentCoordinates" 
    >
    </LineWithLineChart>
    <VaModal v-if="isPrivate"
        v-model="showModalTitle"
        ok-text="OK"
        :beforeOk="saveName"
        >
            <h3>Редактирование названия</h3>
            <input v-if="workoutItem" v-model="workoutItem.name" type="text" placeholder="Название" class="workout-item-input" />
            <div v-else>Тренировка не найдена</div>
    </VaModal>
    <VaModal v-if="isPrivate"
        v-model="showModalLink"
        ok-text="OK"
        :beforeOk="saveLink"
        >
            <h3>Редактирование ссылок</h3>
            <input v-model="dzenLink" type="text" placeholder="Название" class="workout-item-input" />
    </VaModal>
</template>
<script setup lang="ts">
import VaZoomOut from "../../../components/icons/VaZoomOut.vue";

import 'chartjs-adapter-moment';
import { AxiosResponse, AxiosInstance, AxiosError } from "axios";
import { ref, inject, shallowRef } from 'vue'
import { useToast } from "vuestic-ui/web-components";
import zoomPlugin, { resetZoom } from 'chartjs-plugin-zoom';
import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    LineElement,
    LinearScale,
    CategoryScale,
    LogarithmicScale,
    PointElement,
    TimeScale
} from 'chart.js'

import LineWithLineChart from './LineWithLineChart.js'
import type { YMap } from '@yandex/ymaps3-types';
import { YandexMap, YandexMapDefaultSchemeLayer, YandexMapFeature, YandexMapDefaultFeaturesLayer, YandexMapDefaultMarker } from 'vue-yandex-maps';
import { WorkoutItem, distConvert, speedConvert, formatTime, ChartData } from "../Definitions.vue";



interface Props {
    workoutItem?: WorkoutItem
    data: ChartData,
    mapCenter: Array<number>,
    lineCoordinates: Array<Array<number>>,
    isPrivate: boolean,
    dzenLink?: string
  }
const { workoutItem, data, mapCenter, lineCoordinates, dzenLink: dzenLinkProps } = defineProps<Props>()
const dzenLink = ref(dzenLinkProps);

const map = shallowRef<null | YMap>(null);
const chart = ref();
let currentCoordinates = ref<Array<number> | null>([]);
let showModalTitle = ref(false);
const showModalLink = ref(false);
ChartJS.register(
    Title,
    Tooltip,
    Legend,
    LineElement,
    CategoryScale,
    LogarithmicScale,
    LinearScale,
    PointElement,
    zoomPlugin,
    TimeScale
)

const { init } = useToast();

type afterEventEvent = {
    "type": string
}
type afterEventArgs = {
    "event": afterEventEvent,
}

const chartPlugins = [
{
    id: 'eventPlugin',
    afterEvent(chart: any, args: afterEventArgs, opts: any) {
      if (args.event.type == "mouseout") {
        currentCoordinates.value = null;
      }
    }
}
];
const chartOptions = {
    responsive: true,
    scales: {
        yAxes: {
            type: 'logarithmic',
            position: 'right',
            stacked: false,
            ticks: {
                beginAtZero: false
            },
            gridLines: {
                display: true
            }
        },
        x: {
            type: 'time',
            time: {
                displayFormats: { hour: 'HH:mm' }
            }
        }
    },
    plugins: {
        tooltip: {
            enabled: true,
            intersect: false,
            footerMarginTop: 10,
            displayColors: false,
            callbacks: {
                label: function (context: any) {
                    currentCoordinates.value = lineCoordinates[context.dataIndex];
                    let show_data = [];
                    for (let i = 0; i < data.datasets.length; i++) {
                        let value = data.datasets[i].label + " :" + Math.floor(data.datasets[i].data[context.dataIndex])
                        if (data.datasets[i].label == "Скорость") {
                            value = value + " км/ч";
                        }
                        if (data.datasets[i].label == "Пульс") {
                            value = value + " уд/мин";
                        }
                        if (data.datasets[i].label == "Мощность") {
                            value = value + " Ватт";
                        }
                        if (data.datasets[i].label == "Подъем") {
                            value = value + " м";
                        }
                        show_data.push(value);
                    }
                    return show_data;
                }
            }
        },
        zoom: {
            zoom: {
                drag: {
                    enabled: true,
                },
                pinch: {
                    enabled: true
                },
                mode: 'x',
            }
        }
    }
}
const axiosAuth = inject('axiosAuth') as AxiosInstance;
const saveLink = (hide: any) => {
    if (!dzenLink.value) {
        return
    }
    if (!workoutItem) {
        return
    }
    if (!dzenLink.value.includes("https://dzen.ru/")) {
        init({
            message: "Неверный формат ссылки",
            color: "error",
        });
        return;
    }
    axiosAuth
        .patch(`/api/v0/workouts/${workoutItem.id}`,{ links: [{"value": dzenLink.value, "type": "dzen"}] })
        .then((response: AxiosResponse) => {
            hide();
        }).catch((error: AxiosError) => {
            console.log(error);
            init({
                message: "Что-то пошло не так.",
                color: "error",
            });
        });
    };
const saveName = (hide: any) => {
    if (!workoutItem) {
        return
    }
    if (workoutItem.name.length == 0) {
        init({
                message: "Название не может быть пустым",
                color: "error",
            });
            return;
    }
    axiosAuth
        .patch(`/api/v0/workouts/${workoutItem.id}`,{ name: workoutItem.name })
        .then((response: AxiosResponse) => {
            hide();
        }).catch((error: AxiosError) => {
            console.log(error);
            init({
                message: "Что-то пошло не так.",
                color: "error",
            });
        });
    };
const changePublic = (value: boolean) => {
    if (!workoutItem) {
        return
    }
    axiosAuth
        .patch(`/api/v0/workouts/${workoutItem.id}`,{ is_public: value })
        .then((response: AxiosResponse) => {

        }).catch((error: AxiosError) => {
            console.log(error);
            init({
                message: "Что-то пошло не так.",
                color: "error",
            });
        });
    };

const resetChartZoom = () => {
    resetZoom(chart.value.chart);
}

</script>



<style>
#zoom-botton {
    display: block;
    margin-top: 20px;
    margin-bottom: -35px;
    margin-left: 20px;
}

#workout-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

#workout-map {
    width: 70%;
}

#workout-short-data {
    width: 30%;
    padding: 0 0 0 20px;
}
h3 {
    margin-bottom: 10px;
    font-size: 20px;
    font-family: sans-serif;

}
.workout-item-params {
    display: flex;
    width: 100%;
    justify-content:left;
    color: #333;
    padding: 0 0 5px 0 

}
.workout-item-params-name {
    font-weight: bold;
}
.workout-item-params-value {
    padding: 0 0 0 5px
}
.workout-item-editable-title {
    display: flex;
    width: 100%;
    justify-self: start;
}
.workout-item-editable-title h3 {
    padding-right: 5px;
}
.workout-item-editable-title i {
   cursor: pointer;
}
.workout-item-input {
    border: #333 1px solid;
    padding-left: 5px;
}
.workout-item-params-pointer {
    cursor: pointer;
}
</style>