<template>
    <span
        v-if="engineer.phone"
        class="flex items-center justify-start gap-1 font-medium text-gray-200 text-start"
    >
        <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M4.16667 3.33337H7.5L9.16667 7.50004L7.08333 8.75004C7.9758 10.5596 9.44039 12.0242 11.25 12.9167L12.5 10.8334L16.6667 12.5V15.8334C16.6667 16.2754 16.4911 16.6993 16.1785 17.0119C15.866 17.3244 15.442 17.5 15 17.5C11.7494 17.3025 8.68346 15.9221 6.38069 13.6194C4.07792 11.3166 2.69754 8.25065 2.5 5.00004C2.5 4.55801 2.67559 4.13409 2.98816 3.82153C3.30072 3.50897 3.72464 3.33337 4.16667 3.33337"
                stroke="#AAAAAA"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
            />
        </svg>

        {{ formattedPhoneNumber }}
    </span>
    <template v-else>
        <template v-if="engineer.user.is_current_user">
            <button
                class="flex items-center justify-start gap-1 font-medium text-gray-200 text-start"
                @click="openPhoneModal"
            >
                <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M4.16667 3.33337H7.5L9.16667 7.50004L7.08333 8.75004C7.9758 10.5596 9.44039 12.0242 11.25 12.9167L12.5 10.8334L16.6667 12.5V15.8334C16.6667 16.2754 16.4911 16.6993 16.1785 17.0119C15.866 17.3244 15.442 17.5 15 17.5C11.7494 17.3025 8.68346 15.9221 6.38069 13.6194C4.07792 11.3166 2.69754 8.25065 2.5 5.00004C2.5 4.55801 2.67559 4.13409 2.98816 3.82153C3.30072 3.50897 3.72464 3.33337 4.16667 3.33337"
                        stroke="#AAAAAA"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                </svg>

                Add phone number
            </button>
            <Modal @closed="closedConfirmationModal" ref="phone_modal">
                <div
                    class="container flex flex-col items-center justify-center w-full pb-5"
                >
                    <FormKit
                        form-class="w-full mt-5"
                        name="tagline_form"
                        type="form"
                        @submit="submit"
                        :actions="false"
                        #default="{ state: { valid } }"
                    >
                        <Mobile v-model:phone="form.phone" />
                        <div class="flex items-center justify-end w-full mt-5">
                            <FormKit
                                :loading="form.processing"
                                :disabled="!valid || form.processing"
                                type="submit"
                            >
                                {{ $t('Register.save') }}
                            </FormKit>
                        </div>
                    </FormKit>
                </div>
            </Modal>
        </template>
    </template>
</template>

<script>
import Modal from "@/components/General/FormModal.vue";
import JetButton from "@/Jetstream/Button.vue";
import Mobile from "@/components/Inputs/Mobile";
export default {
    props: {
        engineer: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            form: this.$inertia.form({
                phone: this.engineer.phone || {
                    number: "",
                    code: "",
                },
            }),
            countryCodes: {
                eg: "+20",
                sa: "+966",
                us: "+1",
                ae: "+971",
            },
        };
    },
    methods: {
        openPhoneModal() {
            this.$refs["phone_modal"].open();
        },
        closePhoneModal() {
            this.$refs["phone_modal"].close();
        },
        submit() {
            this.form.post(route("engineer-profile-information.update"), {
                preserveScroll: true,
                onSuccess: () => {
                    this.$refs["phone_modal"].close();
                },
                onError: (error) => {
                    console.error(error);
                },
            });
        },
    },
    watch: {
        engineer: {
            deep: true,
            handler(value) {
                this.$emit("update:engineer", value);
            },
        },
    },
    components: {
        Modal,
        JetButton,
        Mobile,
    },
    computed: {
        formattedPhoneNumber() {
            return `${
                this.countryCodes[this.engineer.phone?.code?.toLowerCase()]
            } ${this.engineer.phone.phone}`;
        },
    },
};
</script>
