<template>
    <a v-if="isDisplayBadge" @click="openModal">
        <span class="chill-entity" :class="badgeType">
            {{ buttonText }}<span v-if="isDead"> (‡)</span>
        </span>
    </a>
    <a
        v-else
        class="btn btn-sm"
        target="_blank"
        :class="classAction"
        :title="$t(titleAction)"
        @click="openModal"
    >
        {{ buttonText }}<span v-if="isDead"> (‡)</span>
    </a>

    <teleport to="body">
        <modal
            v-if="modal.showModal"
            :modal-dialog-class="modal.modalDialogClass"
            @close="modal.showModal = false"
        >
            <template #header>
                <h3 v-if="parent" class="modal-title">
                    {{ $t(titleModal, { q: parent.text }) }}
                </h3>
                <h3 v-else class="modal-title">
                    {{ $t(titleModal) }}
                </h3>
            </template>

            <template #body v-if="type === 'person'">
                <on-the-fly-person
                    :id="id"
                    :type="type"
                    :action="action"
                    ref="castPerson"
                />
                <div v-if="hasResourceComment">
                    <h3>{{ $t("onthefly.resource_comment_title") }}</h3>
                    <blockquote class="chill-user-quote">
                        {{ parent.comment }}
                    </blockquote>
                </div>
            </template>

            <template #body v-else-if="type === 'thirdparty'">
                <on-the-fly-thirdparty
                    :id="id"
                    :type="type"
                    :action="action"
                    ref="castThirdparty"
                />
                <div v-if="hasResourceComment">
                    <h3>{{ $t("onthefly.resource_comment_title") }}</h3>
                    <blockquote class="chill-user-quote">
                        {{ parent.comment }}
                    </blockquote>
                </div>
            </template>

            <template #body v-else-if="parent">
                <on-the-fly-thirdparty
                    :parent="parent"
                    :action="action"
                    type="thirdparty"
                    ref="castThirdparty"
                />
            </template>

            <template #body v-else>
                <on-the-fly-create
                    :action="action"
                    :allowed-types="allowedTypes"
                    :query="query"
                    ref="castNew"
                />
            </template>

            <template #footer>
                <a
                    v-if="action === 'show'"
                    :href="buildLocation(id, type)"
                    :title="$t(titleMessage)"
                    class="btn btn-show"
                    >{{ $t(buttonMessage) }}
                </a>
                <a v-else class="btn btn-save" @click="saveAction">
                    {{ $t("action.save") }}
                </a>
            </template>
        </modal>
    </teleport>
</template>

<script>
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
import OnTheFlyCreate from "./Create.vue";
import OnTheFlyPerson from "ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue";
import OnTheFlyThirdparty from "ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue";

export default {
    name: "OnTheFly",
    components: {
        Modal,
        OnTheFlyPerson,
        OnTheFlyThirdparty,
        OnTheFlyCreate,
    },
    props: [
        "type",
        "id",
        "action",
        "buttonText",
        "displayBadge",
        "isDead",
        "parent",
        "allowedTypes",
        "query",
    ],
    emits: ["saveFormOnTheFly"],
    data() {
        return {
            modal: {
                showModal: false,
                modalDialogClass: "modal-dialog-scrollable modal-xl",
            },
        };
    },
    computed: {
        hasResourceComment() {
            return (
                typeof this.parent !== "undefined" &&
                this.parent !== null &&
                this.action === "show" &&
                this.parent.type === "accompanying_period_resource" &&
                this.parent.comment !== null &&
                this.parent.comment !== ""
            );
        },
        classAction() {
            switch (this.action) {
                case "show":
                    return "btn-show";
                case "edit":
                    return "btn-update";
                case "create":
                    return "btn-create";
                case "addContact":
                    return "btn-tpchild";
                default:
                    return "";
            }
        },
        titleAction() {
            switch (this.action) {
                case "show":
                    return "action.show";
                case "edit":
                    return "action.edit";
                case "create":
                    return "action.create";
                case "addContact":
                    return "action.addContact";
                default:
                    return "";
            }
        },
        titleCreate() {
            if (typeof this.allowedTypes === "undefined") {
                return "onthefly.create.title.default";
            }
            return this.allowedTypes.every((t) => t === "person")
                ? "onthefly.create.title.person"
                : this.allowedTypes.every((t) => t === "thirdparty")
                  ? "onthefly.create.title.thirdparty"
                  : "onthefly.create.title.default";
        },
        titleModal() {
            switch (this.action) {
                case "show":
                    return "onthefly.show." + this.type;
                case "edit":
                    return "onthefly.edit." + this.type;
                case "create":
                    return this.titleCreate;
                case "addContact":
                    return "onthefly.addContact.title";
                default:
                    return "";
            }
        },
        titleMessage() {
            switch (this.type) {
                case "person":
                    return "action.redirect." + this.type;
                case "thirdparty":
                    return "action.redirect." + this.type;
                default:
                    return "";
            }
        },
        buttonMessage() {
            switch (this.type) {
                case "person":
                    return "onthefly.show.file_" + this.type;
                case "thirdparty":
                    return "onthefly.show.file_" + this.type;
            }
        },
        isDisplayBadge() {
            return this.displayBadge === true && this.buttonText !== null;
        },
        badgeType() {
            return "entity-" + this.type + " badge-" + this.type;
        },
        getReturnPath() {
            return `?returnPath=${window.location.pathname}${window.location.search}${window.location.hash}`;
        },
    },
    methods: {
        closeModal() {
            this.modal.showModal = false;
        },
        openModal() {
            // console.log('## OPEN ON THE FLY MODAL');
            // console.log('## type:', this.type, ', action:', this.action);
            this.modal.showModal = true;
            this.$nextTick(function () {
                //this.$refs.search.focus();
            });
        },
        changeActionTo(action) {
            this.$data.action = action;
        },
        saveAction() {
            // console.log('saveAction button: create/edit action with', this.type);
            let type = this.type,
                data = {};
            switch (type) {
                case "person":
                    data = this.$refs.castPerson.$data.person;
                    console.log("person data are", data);
                    break;

                case "thirdparty":
                    data = this.$refs.castThirdparty.$data.thirdparty;
                    /* never executed ? */
                    break;

                default:
                    if (typeof this.type === "undefined") {
                        // action=create or addContact
                        // console.log('will rewrite data');
                        if (this.action === "addContact") {
                            type = "thirdparty";
                            data = this.$refs.castThirdparty.$data.thirdparty;
                            // console.log('data original', data);
                            data.parent = {
                                type: "thirdparty",
                                id: this.parent.id,
                            };
                            data.civility =
                                data.civility !== null
                                    ? {
                                          type: "chill_main_civility",
                                          id: data.civility.id,
                                      }
                                    : null;
                            data.profession =
                                data.profession !== "" ? data.profession : "";
                        } else {
                            type = this.$refs.castNew.radioType;
                            data = this.$refs.castNew.castDataByType();
                            // console.log('type', type);
                            if (
                                typeof data.civility !== "undefined" &&
                                null !== data.civility
                            ) {
                                data.civility =
                                    data.civility !== null
                                        ? {
                                              type: "chill_main_civility",
                                              id: data.civility.id,
                                          }
                                        : null;
                            }
                            if (
                                typeof data.profession !== "undefined" &&
                                "" !== data.profession
                            ) {
                                data.profession =
                                    data.profession !== ""
                                        ? data.profession
                                        : "";
                            }
                            // console.log('onthefly data', data);
                        }
                    } else {
                        throw "error with object type";
                    }
            }
            // pass datas to parent
            this.$emit("saveFormOnTheFly", { type: type, data: data });
        },
        buildLocation(id, type) {
            if (type === "person") {
                // TODO i18n
                return encodeURI(
                    `/fr/person/${id}/general${this.getReturnPath}`,
                );
            } else if (type === "thirdparty") {
                return encodeURI(
                    `/fr/3party/3party/${id}/view${this.getReturnPath}`,
                );
            }
        },
    },
};
</script>

<style lang="css" scoped>
a {
    cursor: pointer;
}

/* .btn-add-contact {
   background-color: pink;
} */
</style>
