<template>
    <div>
        <div class="m-md-3">
            <DateInputs
                :startDate="startDate"
                :endDate="endDate"
                :maxDate="maxDate"
                :warningInterval="warningInterval"
                @update:startDate="updateStartDate"
                @update:endDate="updateEndDate"
                @update:maxDate="updateMaxDate"
                @update:warningInterval="updateWarningInterval"
            />

            <TimeSpentInput
                :timeSpent="timeSpent"
                :timeSpentChoices="timeSpentChoices"
                @update:timeSpent="updateTimeSpent"
            />

            <CommentInput :comment="comment" @update:comment="updateComment" />

            <DocumentsList
                v-if="evaluation.documents.length > 0"
                :documents="evaluation.documents"
                :docAnchorId="docAnchorId"
                :evaluation="evaluation"
                :accompanyingPeriodId="store.state.work.accompanyingPeriod.id"
                @inputDocumentTitle="onInputDocumentTitle"
                @removeDocument="removeDocument"
                @duplicateDocument="duplicateDocument"
                @duplicate-document-to-evaluation="
                    duplicateDocumentToEvaluation
                "
                @move-document-to-evaluation="moveDocumentToEvaluation"
                @statusDocumentChanged="onStatusDocumentChanged"
                @goToGenerateNotification="goToGenerateDocumentNotification"
            />

            <DocumentActions
                :evaluation="evaluation"
                :templates="getTemplatesAvailables"
                @addDocument="addDocument"
            />
        </div>
    </div>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";
import DateInputs from "./DateInputs.vue";
import TimeSpentInput from "./TimeSpentInput.vue";
import CommentInput from "./CommentInput.vue";
import DocumentsList from "./DocumentsList.vue";
import DocumentActions from "./DocumentActions.vue";
import {
    trans,
    EVALUATION_DOCUMENT_DUPLICATE_SUCCESS,
    EVALUATION_DOCUMENT_MOVE_SUCCESS,
} from "translator";
import { useToast } from "vue-toast-notification";
import { buildLinkCreate as buildLinkCreateNotification } from "ChillMainAssets/lib/entity-notification/api";

const props = defineProps(["evaluation", "docAnchorId"]);
const store = useStore();

const $toast = useToast();

const timeSpentChoices = [
    { text: "1 minute", value: 60 },
    { text: "2 minutes", value: 120 },
    { text: "3 minutes", value: 180 },
    { text: "4 minutes", value: 240 },
    { text: "5 minutes", value: 300 },
    { text: "10 minutes", value: 600 },
    { text: "15 minutes", value: 900 },
    { text: "20 minutes", value: 1200 },
    { text: "25 minutes", value: 1500 },
    { text: "30 minutes", value: 1800 },
    { text: "45 minutes", value: 2700 },
    { text: "1 hour", value: 3600 },
    { text: "1 hour 15 minutes", value: 4500 },
    { text: "1 hour 30 minutes", value: 5400 },
    { text: "1 hour 45 minutes", value: 6300 },
    { text: "2 hours", value: 7200 },
    { text: "2 hours 30 minutes", value: 9000 },
    { text: "3 hours", value: 10800 },
    { text: "3 hours 30 minutes", value: 12600 },
    { text: "4 hours", value: 14400 },
    { text: "4 hours 30 minutes", value: 16200 },
    { text: "5 hours", value: 18000 },
    { text: "5 hours 30 minutes", value: 19800 },
    { text: "6 hours", value: 21600 },
    { text: "6 hours 30 minutes", value: 23400 },
    { text: "7 hours", value: 25200 },
    { text: "7 hours 30 minutes", value: 27000 },
    { text: "8 hours", value: 28800 },
];

const startDate = computed({
    get() {
        return props.evaluation.startDate;
    },
    set(v) {
        store.commit("setEvaluationStartDate", {
            key: props.evaluation.key,
            date: v,
        });
    },
});

const endDate = computed({
    get() {
        return props.evaluation.endDate;
    },
    set(v) {
        store.commit("setEvaluationEndDate", {
            key: props.evaluation.key,
            date: v,
        });
    },
});

const maxDate = computed({
    get() {
        return props.evaluation.maxDate;
    },
    set(v) {
        store.commit("setEvaluationMaxDate", {
            key: props.evaluation.key,
            date: v,
        });
    },
});

const warningInterval = computed({
    get() {
        return props.evaluation.warningInterval;
    },
    set(v) {
        store.commit("setEvaluationWarningInterval", {
            key: props.evaluation.key,
            days: v,
        });
    },
});

const timeSpent = computed({
    get() {
        return props.evaluation.timeSpent;
    },
    set(v) {
        store.commit("setEvaluationTimeSpent", {
            key: props.evaluation.key,
            time: v,
        });
    },
});

const comment = computed({
    get() {
        return props.evaluation.comment;
    },
    set(v) {
        store.commit("setEvaluationComment", {
            key: props.evaluation.key,
            comment: v,
        });
    },
});

const getTemplatesAvailables = computed(() => {
    return store.getters.getTemplatesAvailablesForEvaluation(
        props.evaluation.evaluation,
    );
});

// const getAccompanyingPeriod = computed(() => store.work)
function updateStartDate(value) {
    startDate.value = value;
}

function updateEndDate(value) {
    endDate.value = value;
}

function updateMaxDate(value) {
    maxDate.value = value;
}

function updateWarningInterval(value) {
    warningInterval.value = value;
}

function updateTimeSpent(value) {
    timeSpent.value = value;
}

function updateComment(value) {
    comment.value = value;
}

function onInputDocumentTitle(event) {
    const id = Number(event.target.id);
    const key = Number(event.target.dataset.key) + 1;
    const title = event.target.value;
    store.commit("updateDocumentTitle", {
        id: id,
        key: key,
        evaluationKey: props.evaluation.key,
        title: title,
    });
}

function addDocument({ stored_object, stored_object_version }) {
    let document = {
        type: "accompanying_period_work_evaluation_document",
        storedObject: stored_object,
        title: "Nouveau document",
    };
    store.commit("addDocument", {
        key: props.evaluation.key,
        document,
        stored_object_version,
    });
}

function removeDocument(document) {
    if (
        window.confirm(
            'Êtes-vous sûr·e de vouloir supprimer le document qui a pour titre "' +
                document.title +
                '" ?',
        )
    ) {
        store.commit("removeDocument", {
            key: props.evaluation.key,
            document: document,
        });
    }
}

function duplicateDocument(document) {
    store.dispatch("duplicateDocument", {
        evaluation_key: props.evaluation.key,
        document: document,
    });
}

function duplicateDocumentToEvaluation({ evaluation, document }) {
    store
        .dispatch("duplicateDocumentToEvaluation", {
            evaluation: evaluation,
            document: document,
        })
        .then(() => {
            $toast.open({
                message: trans(EVALUATION_DOCUMENT_DUPLICATE_SUCCESS),
            });
        })
        .catch((e) => {
            console.log(e);
        });
}

function moveDocumentToEvaluation({ evaluationDest, document }) {
    console.log("dest eval in formEvaluation", evaluationDest);
    store
        .dispatch("moveDocumentToEvaluation", {
            evaluationInitial: props.evaluation,
            evaluationDest: evaluationDest,
            document: document,
        })
        .then(() => {
            $toast.open({
                message: trans(EVALUATION_DOCUMENT_MOVE_SUCCESS),
            });
        })
        .catch((e) => {
            console.log(e);
        });
}

function onStatusDocumentChanged(newStatus) {
    store.commit("statusDocumentChanged", {
        key: props.evaluation.key,
        newStatus: newStatus,
    });
}

function goToGenerateDocumentNotification(document, tos) {
    const callback = (data) => {
        let evaluation = data.accompanyingPeriodWorkEvaluations.find(
            (e) => e.key === props.evaluation.key,
        );
        let updatedDocument = evaluation.documents.find(
            (d) => d.key === document.key,
        );
        window.location.assign(
            buildLinkCreateNotification(
                "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument",
                updatedDocument.id,
                tos === true
                    ? store.state.work.accompanyingPeriod.user.id
                    : null,
                window.location.pathname +
                    window.location.search +
                    window.location.hash,
            ),
        );
    };
    store.dispatch("submit", callback).catch((e) => {
        console.log(e);
        throw e;
    });
}
</script>

<style lang="scss" scoped>
input.document-title {
    font-weight: bold;
    font-size: 1rem;
}

.bg-blink {
    color: #050000;
    padding: 10px;
    display: inline-block;
    border-radius: 5px;
    animation: blinkingBackground 2.2s infinite;
    animation-iteration-count: 2;
}

@keyframes blinkingBackground {
    0% {
        background-color: #ed776d;
    }
    50% {
        background-color: #ffffff;
    }
    100% {
        background-color: #ed776d;
    }
}
</style>
