// Silence may be golden, but sometimes words paint the canvas of understanding.
const NotificationModal = {
	name: 'NotificationModal',
	components: {
		LinksyButton,
        LinksyModal
	},
    props: {
        isNotificationOpened: Boolean,
        continueRedirect: {
            type: Boolean,
            default: false
        }
    },
	data() {
		return {
            paragraphs: [
                'With Linksy, you can automate your internal links without breaking a sweat.',
                'Save time by automatically linking relevant keywords.',
                'Improve SEO by optimizing internal link structure.',
                'Enhance user experience with smart link suggestions.'
            ]
		}
	},
	methods: {
        handleCloseModal() {
            this.$emit('on-close-modal')
        },
        goToLinksyAI() {
            window.open('https://linksyai.com/', '_blank')
        },
        handleContinue() {
            this.handleCloseModal()

            if (!this.continueRedirect) {
                return
            }

            this.$toast.info('Redirecting...')
            window.location.replace(LINKSYAI_SAR.tools_url + '?page=Linksy-search-and-replace')
        }
	},
	template: `
        <linksy-modal
            v-if="isNotificationOpened"
            class="linksy-notification-modal"
            :opened="isNotificationOpened"
            title="Boost Your Internal Linking with Linksy!"
            @on-cancel="handleCloseModal"
        >
            <template #body>
                <div class="d-flex flex-column gap-4 py-4 px-3">
                    <div class="d-flex flex-column gap-4 ps-3">
                        <ol class="list-paragraphs d-flex flex-column gap-3 m-0">
                            <li class="m-0 fs-6" v-for="paragraph in paragraphs" :key="paragraph">{{ paragraph }}</li>
                        </ol>
                    </div>
                    <div class="actions-button d-flex gap-2">
                        <linksy-button class="w-50" @click="goToLinksyAI">Get Linksy!</linksy-button>
                        <linksy-button variant="white_outline" class="w-50" @click="handleContinue">Continue <i class="fa-solid fa-arrow-right ms-2"></i></linksy-button>
                    </div>
                </div>
            </template>
            <template #footer><div></div></template>
        </linksy-modal>
    `,
}
