<template>
  <el-dialog title="Edycja fazy"
             :visible.sync="isVisible"
             width="25%"
             class="app-modal">

    <div class="modal__content">
      <el-form ref="stageDto"
               :model="stageDto"
               label-width="120px">

        <el-form-item label="Priority" prop="priority">
          <el-input-number v-model="stageDto.priority" controls-position="right"
                           :min="1"
                           :max="10">

          </el-input-number>
        </el-form-item>

        <el-form-item label="Probability" prop="probability">
          <el-input-number v-model="stageDto.probability"
                           controls-position="right"
                           :precision="1"
                           :step="0.1"
                           :min="0.0"
                           :max="1.0">

          </el-input-number>
        </el-form-item>

        <el-form-item label="Description" prop="description">
          <el-input type="textarea" v-model="stageDto.description"></el-input>
        </el-form-item>

        <el-form-item label="Employees">
          <el-popover v-for="(involvement,i) in stageDto.assignedInvolvements"
                      :key="i"
                      placement="top"
                      width="300">

            <div style="text-align: center; margin: 0">
              <p>Involvement</p>
              <el-slider v-model="involvement.involvement"></el-slider>
            </div>
            <div style="text-align: center; margin: 0">
              <p>Probability</p>
              <el-input-number v-model="involvement.probability"
                               controls-position="left"
                               :precision="1"
                               :step="0.1"
                               :min="0.0"
                               :max="1.0">

              </el-input-number>
            </div>

            <div style="text-align: center; margin-top: 10px">
              <el-button type="danger"
                         @click="deleteInvolvement(involvement)">

                Delete this involvement
              </el-button>
            </div>

            <el-button type="success"
                       size="mini"
                       round slot="reference">
              {{involvement.firstName + ' ' +
              involvement.lastName + ' || ' + involvement.probability + '/' +
              involvement.involvement +
              '%'}}
            </el-button>
          </el-popover>
        </el-form-item>

        <el-form-item label="Add employees">

          <el-select v-model="newInvolvements"
                     multiple
                     filterable
                     placeholder="Type employees">

            <el-option
              v-for="item in possibleEmployees"
              :key="item.code"
              :label="item.firstName + ' ' + item.lastName"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Set changes to:">
          <el-select v-model="setChangesToMonth" filterable
                     placeholder="Type month">
            <el-option
              v-for="item in changesEndingMonths"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="submitForm()">Submit</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import store from '@/store/store';
import axios from 'axios';
import moment from 'moment';

export default {
	name: 'AppModal',
	data() {
		return {
			newInvolvements: [],
			setChangesToMonth: ''
		}
	},
	methods: {
		deleteInvolvement(involvement) {
			for (var i = 0; i < this.stageDto.assignedInvolvements.length; i++) {
				if (this.stageDto.assignedInvolvements[i] === involvement) {
					this.stageDto.assignedInvolvements.splice(i, 1);
				}
			}
		},
		async submitForm() {
			for (var i = 0; i < this.newInvolvements.length; i++) {
				var promise = await axios.get(`/api/employees/${this.newInvolvements[i]}`)
					.then(response => {
						var involvementDto = {};
						involvementDto.involvement = 100;
						involvementDto.probability = 1;
						involvementDto.firstName = response.data.firstName;
						involvementDto.lastName = response.data.lastName;
						involvementDto.employeeCode = response.data.code;
						this.stageDto.assignedInvolvements.push(involvementDto);
					});
			}
			axios.post(`/api/stages/edit`, store.state.Modal.stageDto);
			store.commit('toggleModal');
			const phases = await store.dispatch('getProjectPhases', store.state.Modal.projectCode);
			store.commit('updatePhases', {
				phasesArr: phases,
				projectCode: store.state.Modal.projectCode
			});

			var startEditDate = moment(this.stageDto.startDate).add(1, 'day');
			var endEditDate = moment(this.stageDto.startDate).set('month', this.setChangesToMonth).add(1, 'month').subtract(1, 'day');
			let editedStage = {};
			while (startEditDate.isBefore(endEditDate)) {
				var p2 = await axios.get(`/api/stages/one/${this.projectCode}?endingAfter=${startEditDate.format('YYYY-MM-DD')}`)
					.then(response => {
						Object.assign(editedStage, response.data);
						for (var i = 0; i < this.stageDto.assignedInvolvements.length; i++) {
							console.log('sraka');
							if (this.stageDto.assignedInvolvements[i].code === undefined) {
								editedStage.assignedInvolvements.push(this.stageDto.assignedInvolvements[i]);
								console.log('pedau');
								editedStage.assignedInvolvements[i].done = true;
							} else {
								for (var j = 0; j < editedStage.assignedInvolvements.length; j++) {
									if (editedStage.assignedInvolvements[j].firstName === this.stageDto.assignedInvolvements[i].firstName &&
										editedStage.assignedInvolvements[j].lastName === this.stageDto.assignedInvolvements[i].lastName) {
										console.log('pedau');
										editedStage.assignedInvolvements[j].involvement =
											this.stageDto.assignedInvolvements[i].involvement;
										editedStage.assignedInvolvements[j].probability =
											this.stageDto.assignedInvolvements[i].probability;
										editedStage.assignedInvolvements[j].employeeCode =
											this.stageDto.assignedInvolvements[i].employeeCode;
										editedStage.assignedInvolvements[j].done = true;
									}
								}
							}
						}
						for (var k = 0; k < editedStage.assignedInvolvements.length; k++) {
							if (editedStage.assignedInvolvements[k].done === undefined) {
								editedStage.assignedInvolvements.splice(k, 1);
							}
						}
						console.log(editedStage.assignedInvolvements);
						editedStage.priority = this.stageDto.priority;
						editedStage.probability = this.stageDto.probability;
						axios.post(`/api/stages/edit`, editedStage);
					});
				startEditDate.add(1, 'month');
			}
			this.setChangesToMonth = '';

		}
	},
	computed: {
		isVisible: {
			get: () => store.state.Modal.isVisible,
			set: () => store.commit('toggleModal')
		},
		stageDto: () => store.state.Modal.stageDto,
		possibleEmployees: () => store.state.Employees.possibleEmployees,
		projectCode: () => store.state.Modal.projectCode,
		possibleEmployees: () => store.state.Employees.possibleEmployees,
		changesEndingMonths: () => store.state.Modal.monthsForward
	}

}
</script>

<style scoped lang="scss">
</style>