<template>
<div class="d-flex align-items-center">
    <!-- 링크 아이콘 -->
    <i class="bx bx-link-alt me-2" @click="togglePopover"></i>

    <!-- 링크 입력창 (옆으로 나오게) -->
    <div
    v-if="isPopoverVisible"
    class="popover-container d-flex align-items-center"
    >
    <input
        v-model="link"
        placeholder="URL을 입력해주세요"
        class="form-control me-2"
        style="min-width: 200px;"
    />
    <save-btn class="btn-sm" @click="saveLink"/>

    </div>

    <!-- 등록된 링크, 입력창이 보이지 않고 등록된 링크만 보일 때 -->
    <span v-if="isLinkSaved && !isPopoverVisible" class="ms-2">
    <a :href="formattedLink" target="_blank" rel="noopener noreferrer">{{ link }}</a>
    </span>
</div>
</template>

<script setup>
import SaveBtn from '@c/button/SaveBtn.vue'

import { ref, computed } from "vue";

const props = defineProps({
modelValue: String,
});
const emit = defineEmits(["update:modelValue"]);

const isPopoverVisible = ref(false);
const link = ref(props.modelValue || "");
const isLinkSaved = ref(false);  // Track if the link has been saved

const formattedLink = computed(() => {
return link.value.startsWith("http") ? link.value : "http://" + link.value;
});

const togglePopover = () => {
isPopoverVisible.value = !isPopoverVisible.value;
};

const saveLink = () => {
emit("update:modelValue", link.value);
isLinkSaved.value = true;  // Set the link as saved
isPopoverVisible.value = false;
};
</script>

<style scoped>
.popover-container {
display: flex;
align-items: center;
gap: 8px; /* 아이콘과 입력창 간격 조정 */
}
</style>
