<template>
    <span
        v-if="engineer.location"
        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="M10 11.6666C11.3807 11.6666 12.5 10.5473 12.5 9.16663C12.5 7.78591 11.3807 6.66663 10 6.66663C8.61929 6.66663 7.5 7.78591 7.5 9.16663C7.5 10.5473 8.61929 11.6666 10 11.6666Z"
                stroke="#AAAAAA"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
            />
            <path
                d="M14.7138 13.8808L11.178 17.4167C10.8655 17.7289 10.4418 17.9042 10.0001 17.9042C9.55836 17.9042 9.13469 17.7289 8.82218 17.4167L5.28551 13.8808C4.3532 12.9485 3.71829 11.7606 3.46108 10.4674C3.20388 9.17419 3.33592 7.83376 3.84051 6.61561C4.34511 5.39745 5.19959 4.35628 6.29591 3.62376C7.39223 2.89123 8.68115 2.50024 9.99968 2.50024C11.3182 2.50024 12.6071 2.89123 13.7034 3.62376C14.7998 4.35628 15.6542 5.39745 16.1588 6.61561C16.6634 7.83376 16.7955 9.17419 16.5383 10.4674C16.2811 11.7606 15.6462 12.9485 14.7138 13.8808V13.8808Z"
                stroke="#AAAAAA"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
            />
        </svg>
        <span class="flex-1 line-clamp-1 overflow-ellipsis">
            {{ engineer.location.address }}
        </span>
    </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="getCurrentLocation"
            >
                <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M10 11.6666C11.3807 11.6666 12.5 10.5473 12.5 9.16663C12.5 7.78591 11.3807 6.66663 10 6.66663C8.61929 6.66663 7.5 7.78591 7.5 9.16663C7.5 10.5473 8.61929 11.6666 10 11.6666Z"
                        stroke="#AAAAAA"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M14.7138 13.8808L11.178 17.4167C10.8655 17.7289 10.4418 17.9042 10.0001 17.9042C9.55836 17.9042 9.13469 17.7289 8.82218 17.4167L5.28551 13.8808C4.3532 12.9485 3.71829 11.7606 3.46108 10.4674C3.20388 9.17419 3.33592 7.83376 3.84051 6.61561C4.34511 5.39745 5.19959 4.35628 6.29591 3.62376C7.39223 2.89123 8.68115 2.50024 9.99968 2.50024C11.3182 2.50024 12.6071 2.89123 13.7034 3.62376C14.7998 4.35628 15.6542 5.39745 16.1588 6.61561C16.6634 7.83376 16.7955 9.17419 16.5383 10.4674C16.2811 11.7606 15.6462 12.9485 14.7138 13.8808V13.8808Z"
                        stroke="#AAAAAA"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                </svg>
                Get current location
            </button>
            <Modal
                @closed="closedConfirmationModal"
                size="lg"
                ref="location_modal"
            >
                <div class="flex flex-col items-center justify-center w-full">
                    <FormKit
                        form-class="w-full mt-5"
                        name="tagline_form"
                        type="form"
                        @submit="submit"
                        :actions="false"
                        #default="{ state: { valid } }"
                    >
                        <FormKit
                            id="location"
                            name="location"
                            v-model="form.location"
                            type="text"
                            required
                            label="Add your position title and company"
                            placeholder="Ex. Senior Software Engineer at Muhandisin Inc."
                            validation="required|length:2,255"
                            validation-label="location"
                        />
                        <FormKit :disabled="!valid" type="submit">
                            Add
                        </FormKit>
                    </FormKit>
                </div>
            </Modal>
        </template>
    </template>
</template>

<script>
import Modal from "@/components/General/Modal.vue";
import JetButton from "@/Jetstream/Button.vue";
import { currentLocation } from "@/composables/location";
export default {
    props: {
        engineer: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            form: this.$inertia.form({
                location: this.engineer.location,
            }),
        };
    },
    methods: {
        openTaglineModal() {
            this.$refs["location_modal"].open();
        },
        closeTaglineModal() {
            this.$refs["location_modal"].close();
        },
        getCurrentLocation() {
            currentLocation().then((location) => {
                this.form.location = location;
                this.engineer.location = location;
                // this.submit();
            });
        },
        submit() {
            this.form.post(route("engineer-profile-information.update"), {
                preserveScroll: true,
                onSuccess: () => {
                    this.$refs["location_modal"].close();
                },
                onError: (error) => {
                    console.error(error);
                },
            });
        },
    },
    watch: {
        engineer: {
            deep: true,
            handler(value) {
                this.$emit("update:engineer", value);
            },
        },
    },
    components: {
        Modal,
        JetButton,
    },
};
</script>
