<!--
ScheduleTogether Frontend
Copyright (C) 2024, Marco Vitchi Thulin

DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License version 3
as published by the Free Software Foundation.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License version 3 for more details.

This program incorporates external libraries for certain functionalities.
These libraries are covered by their respective licenses, and their usage
agreements are as outlined in their respective documentation or source
code.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->

<script setup>

import { useAlertStore, useProvidersStore } from '@/stores';
import { router } from '@/router';
import { ref } from 'vue';

import { Spinner } from '@/components';

const alertStore = useAlertStore();
const providerStore = useProvidersStore();

providerStore.setProvider('skola24');

var step = ref(0);
var hostValue = ref('');
var schoolValue = ref("");
var classValue = ref("");
var termValue = ref("");

async function submitHost() {
    providerStore.setHost(hostValue);
    await providerStore.getSchools();
    if (providerStore.schools.data) {
        step.value = 1;
    }
}

async function submitSchool() {
    const schoolId = schoolValue.value;
    console.log(schoolId);
    if (!schoolId) {
        alertStore.error('You need to select a school before continuing', 5000)
    } else {
        await providerStore.getClasses(schoolId);
        if (providerStore.classes.data) {
            step.value = 2;
        }
    }
}

async function submitClass() {
    const classId = classValue.value;
    console.log(classId);
    if (!classId) {
        alertStore.error('You need to select a class before continuing', 5000)
    } else {
        await providerStore.getTerms();
        if (providerStore.terms.data) {
            step.value = 3;
        }
    }
}

function submitTerm() {
    const termId = termValue.value;
    console.log(termId);
    if (!termId) {
        alertStore.error('You need to select a term before continuing', 5000)
    } else {
        providerStore.getSchedule(schoolValue.value, classValue.value, termId);
        step.value = 4;
    }
}
</script>

<template>
    <div class="content-spacer-smaller"></div>
    <h1 style="text-align: center;">Add Schedule</h1>
    <div class="content-spacer-small"></div>
    <div class="card-container">
        <div class="card shadow" v-if="step == 0">
            <p class="text-center">Enter school code</p>
            <div class="card-form-group center" style="margin-bottom:10px;">
                <input type="text" placeholder="example.skola24.se" v-model="hostValue" class="card-form-control center"/>
            </div>
            <div class="card-form-row center">
                <button style="margin-right:20px;" class="card-form-button negative" @click="router.push('/schedule/add')">Cancel</button>
                <button @click="submitHost()" class="card-form-button">Continue</button>
            </div>
            <Spinner v-if="providerStore.schools.loading" class="spinner-center" />
        </div>
        <div v-if="step == 1">
            <div class="card shadow" v-if="providerStore.schools.data.length == 0">
                <h4 class="card-header error">Failed</h4>
                <p class="text-center">
                    Organization does not provide enough data.<br>
                    Because of this, the chosen organization is not supported at the moment.<br>
                    Try another school code, or select another provider.<br>
                    If you believe this to be an error, please contact administration.<br>
                </p>
                <div class="card-form-row center">
                    <button class="card-form-button negative" @click="router.push('/schedule/add')">OK</button>
                </div>
            </div>
            <div class="card shadow" v-else>
                <p class="text-center">Select a school</p>
                <div class="card-form-group">
                    <select v-model="schoolValue" id="schoolSelect" class="card-form-control">
                        <option value="">Select option..</option>
                        <option v-for="school in providerStore.schools.data" :value="school.id">{{ school.name }}</option>
                    </select>
                </div>
                <div class="card-form-row center">
                    <button style="margin-right:20px;" class="card-form-button negative" @click="router.push('/schedule/add')">Cancel</button>
                    <button @click="submitSchool()" class="card-form-button">Continue</button>
                </div>
                <Spinner v-if="providerStore.classes.loading" class="spinner-center" />
            </div>
        </div>
        <div v-if="step == 2">
            <div class="card shadow" v-if="providerStore.classes.data.length == 0">
                <h4 class="card-header error">Failed</h4>
                <p class="text-center">
                    The selected school does not provide enough data.<br>
                    Because of this, the chosen school is not supported.<br>
                    Try another school code, or select another provider.<br>
                    If you believe this to be an error, please contact us.<br>
                </p>
                <div class="card-form-row center">
                    <button class="card-form-button negative" @click="router.push('/schedule/add')">OK</button>
                </div>
            </div>
            <div class="card shadow" v-else>
                <p class="text-center">Select a class</p>
                <div class="card-form-group">
                    <select v-model="classValue" id="classSelect" class="card-form-control">
                        <option value="">Select option..</option>
                        <option v-for="_class in providerStore.classes.data" :value="_class.id">{{ _class.name }}</option>
                    </select>
                </div>
                <div class="card-form-row center">
                    <button style="margin-right:20px;" class="card-form-button negative" @click="router.push('/schedule/add')">Cancel</button>
                    <button @click="submitClass()" class="card-form-button">Continue</button>
                </div>
                <Spinner v-if="providerStore.terms.loading" class="spinner-center" />
            </div>
        </div>
        <div v-if="step == 3">
            <div class="card shadow" v-if="providerStore.terms.data.length == 0">
                <h4 class="card-header error">Failed</h4>
                <p class="text-center">
                    The chosen organization does not provide enough data.<br>
                    Because of this, this organization is not supported.<br>
                    Try another school code, or select another provider.<br>
                    If you believe this to be an error, please contact us.<br>
                </p>
                <div class="card-form-row center">
                    <button class="card-form-button negative" @click="router.push('/schedule/add')">OK</button>
                </div>
            </div>
            <div class="card shadow" v-else>
                <p class="text-center">Select a term</p>
                <div class="card-form-group">
                    <select v-model="termValue" id="classSelect" class="card-form-control">
                        <option value="">Select option..</option>
                        <option v-for="term in providerStore.terms.data" :value="term.id">{{ term.name }}</option>
                    </select>
                </div>
                <div class="card-form-row center">
                    <button style="margin-right:20px;" class="card-form-button negative" @click="router.push('/schedule/add')">Cancel</button>
                    <button @click="submitTerm()" class="card-form-button">Continue</button>
                </div>
                <Spinner v-if="providerStore.schedule.loading" class="spinner-center" />
            </div>
        </div>
        <div v-if="step == 4">
            <div class="card shadow" v-if="providerStore.schedule.loading">
                <p class="text-center">Please wait..</p>
                <Spinner class="spinner-center" />
            </div>
            <div class="card shadow" v-else>
                <p class="text-center">Schedule data!</p>
                <p class="text-center">{{ providerStore.schedule }}</p>
            </div>
        </div>
    </div>
</template>