<template>
    <span v-if="engineer.tag_line" class="font-medium text-gray-200 text-start">
        {{ engineer.tag_line }}
    </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="openTaglineModal"
            >
                <svg
                    width="21"
                    height="20"
                    viewBox="0 0 21 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M10.5 17.5C14.6421 17.5 18 14.1421 18 10C18 5.85786 14.6421 2.5 10.5 2.5C6.35786 2.5 3 5.85786 3 10C3 14.1421 6.35786 17.5 10.5 17.5Z"
                        stroke="#AAAAAA"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M8 10H13"
                        stroke="#AAAAAA"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M10.5 7.5V12.5"
                        stroke="#AAAAAA"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                </svg>
                {{ $t('Register.add_position') }}
            </button>
            <Modal
                @closed="closedConfirmationModal"
                size="lg"
                ref="tagline_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="tag_line"
                            name="tag_line"
                            v-model="form.tag_line"
                            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="tag_line"
                        />
                        <FormKit :disabled="!valid" type="submit">
                            {{ $t('Register.add') }}
                        </FormKit>
                    </FormKit>
                </div>
            </Modal>
        </template>
    </template>
</template>

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