<script setup>
import { ref } from 'vue'
import i18n from '@/i18n.js'
import {formatDate,getHoursMinutes} from '../scheduleFunctions.js'
import {getOwnedLessons} from "@/rest/lessonSchedule.js";
import {getSelf} from "@/rest/Users.js";
import {createRequest} from "@/rest/LessonRequests.js"
import {getcurriculum} from "@/rest/curriculum.js";
import {getAllSchedule} from "@/rest/scheduleRest.js";


const curriculum = ref();
const allSchedules = ref(await getAllSchedule());
const schedule = ref(await getOwnedLessons());
const createMod = ref(false);
const user = await getSelf();
const editElementID = ref();
const requestType = ref(0);
const currentDate = new Date();
const types = ["TP","TD","Course","Exam"];
const colors = {"TP":"rgb(36,175,255)","TD":"rgb(255,36,175)","Exam":"rgb(175,255,36)","Course":"rgb(255,36,175)"}
const courses = ref();
function inFuture(lesson){
  let toCompare = new Date(lesson.lessonStart);
  let current = new Date();
  return (current < toCompare)
}


async function setCourses(){
  courses.value = (await getcurriculum(curriculum.value.curriculumId)).courses
}
function invertedFormatDate(date) {
  var d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear();

  if (month.length < 2)
    month = '0' + month;
  if (day.length < 2)
    day = '0' + day;

  return [year, month, day].join('-');
}
function createLessonEvent(date,hour){
  const str = date.concat(' ',hour);
  return new Date(str);
}

const maxDate = ref(invertedFormatDate(new Date([currentDate.getMonth()<7 ? currentDate.getFullYear() : (currentDate.getFullYear())+1],7,31)));

const minDate = ref(invertedFormatDate((new Date()).setDate(currentDate.getDate()+1)))


const pattern = {
  "lessonId":null,
  "course": null,
  "day":null,
  "lessonStart": null,
  "lessonEnd": null,
  "lessonType": null,
}


const patternRequest ={
  "user": user,
  "state": "Pending",
  "requestType": null,
  "lessonId":null,
  "lessonType":null,
  "lessonStart":null,
  "lessonEnd":null,
  "color":null,
  "course":null,}

const toModify = ref(Object.assign({}, pattern));
const requestBuffer = ref(Object.assign({},patternRequest));

function setModify(lesson){
  toModify.value.lessonId = editElementID.value;
  toModify.value.day = invertedFormatDate(new Date(lesson.lessonStart));
  toModify.value.lessonStart = getHoursMinutes(lesson.lessonStart);
  toModify.value.lessonEnd = getHoursMinutes(lesson.lessonEnd);
  toModify.value.lessonType = lesson.lessonType
}

async function createLessonRequest(){
  if(requestType.value === 0 || requestType.value === 1){
    //modify
    requestBuffer.value.color = colors[toModify.value.lessonType] ;
    requestBuffer.value.requestType = requestType.value;
    let start = createLessonEvent(toModify.value.day,toModify.value.lessonStart)
    let end = createLessonEvent(toModify.value.day,toModify.value.lessonEnd)
    for (let element in toModify.value){
      if(element !== "day" && element !== "lessonStart" && element !== "lessonEnd"){
        requestBuffer.value[element] = toModify.value[element];
      }
      if(element === "lessonStart"){
        requestBuffer.value.lessonStart = start;
      }
      if(element === "lessonEnd"){
       requestBuffer.value.lessonEnd = end;
      }
    }
  }
  else if(requestType.value === 2) {
    //delete
    requestBuffer.value.lessonId = editElementID;
    requestBuffer.value.requestType = requestType.value;
  }
  await createRequest(requestBuffer.value);
  editElementID.value = '';
}


async function askChanges(i){
  requestType.value= i;
  await createLessonRequest()
}

</script>

<template>

  <div class="body">
    <button @click="createMod = !createMod">Ask Create Request</button>
    <div v-if="createMod">
    <form class="listElement" style="width:40%; margin:0 auto 0 auto;">
      <div style="margin-bottom:20px;">
        Schedule :
        <select @change="setCourses()"v-model="curriculum">
          <option v-for="item in allSchedules" :value='item.curriculum'>{{item.curriculum.option}}</option>
        </select>
      </div>
      <div style="margin-bottom:20px;">
        Lesson :
        <select v-if="curriculum != null" v-model="toModify.course">
          <option v-for="item in courses" :value='item'>{{item.title}}</option>
        </select>
      </div>
      <div style="margin-bottom:20px;">
        Day:
        <input type="date" :min="minDate" :max="maxDate" v-model="toModify.day">
      </div>
      <div style="margin-bottom:20px;">
        Start:
        <input v-model="toModify.lessonStart" type="time" min="08:00" max="18:00" required />
      </div>
      <div style="margin-bottom:20px;">
        End:
        <input v-model="toModify.lessonEnd" type="time" min="10:00" max="20:00" required />
      </div>
      <div style="margin-bottom:20px;">
        Type:
        <select v-model="toModify.lessonType">
          <option v-for="item in types" :value='item'>{{item}}</option>
        </select>
      </div>



      <button class="create" @click="createMod=!createMod; askChanges(1);"> {{i18n("courses.confirm")}} </button>
      <button style="float:right;" @click="createMod=!createMod">{{i18n("courses.back")}}</button>
    </form>
  </div>



    <div v-if="!createMod"v-for="element in schedule" style="width:50%;margin-left:auto; margin-right:auto;" >
      <div  v-if="editElementID !== element.lessonID" style ="padding:15px 15px 15px 15px;">
        <button  v-if="inFuture(element)" @click="editElementID = element.lessonID;setModify(element);">
          Ask Changes
        </button>
      </div>
      <div v-else>
        <button @click="askChanges(0);"> {{i18n("courses.confirm")}} </button>
        <button @click="editElementID= '';"> {{i18n("courses.back")}} </button>
      </div>
      <div class="listElement">
        <div  v-if="editElementID !== element.lessonID">
          <div>
            {{element.course.title}}
          </div>
          <div>{{formatDate(element.lessonStart)}}</div>
          <div>{{getHoursMinutes(element.lessonStart)}}-{{getHoursMinutes(element.lessonEnd)}}
          </div>
          <div>{{element.local}}</div>
          <div>{{element.lessonType}}</div>
        </div>

        <div v-else>
          <div>{{element.course.title}}</div>
          <div style="margin-bottom:20px;">
            Day:
            <input type="date" :min="minDate" :max="maxDate" v-model="toModify.day">
          </div>
          <div style="margin-bottom:20px;">
            Start:
            <input v-model="toModify.lessonStart" type="time" min="8:00" max="20:00"/>
          </div>
          <div style="margin-bottom:20px;">
            End:
            <input v-model="toModify.lessonEnd" type="time" min="10:00" max="20:00" required />
          </div>
          <div style="margin-bottom:20px;">
            Type:
            <select v-model="toModify.lessonType">
              <option v-for="item in types" :value='item'>{{item}}</option>
            </select>
          </div>
          <div style="margin-bottom:20px;">
            Local:
            {{element.local}}
            <div  style="float:right;">
              <button @click="askChanges(2)" class="delete"> ask Deletion </button>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<style scoped>
.body {
  width:100%;
  margin-top:3.5%;
}

.listElement{
  min-width:625px;
  border:2px solid black;
  font-size:25px;
  color:white;
  padding:20px;
  background-color:rgb(50,50,50);
  border-radius:20px;
  margin-bottom:10px;

}

input, select{
  padding:10px 10px 10px 10px;
  font-size:25px;
  cursor: pointer;
  border:none;
  border-radius:15px;
}
button{
  font-size:15px;
  height:50px;
  width:100px;
  border:none;
  border-radius:20px;

}

.delete{
  grid-area:delete;
  background-color:rgb(200,0,0);
}
  button:hover{
    opacity:0.8;
  }

</style>
