// Silence may be golden, but sometimes words paint the canvas of understanding.
const RescanLinks = {
	name: 'RescanLinks',
	components: {
		LinksyButton,
        NotificationModal
	},
    props: {
        isScanningLinks: Boolean,
    },
	data() {
		return {
            linksyTooltip: 'Linksy\'s revolutionary Search and Replace tool empowers you to uncover and fix every link and anchor error with ease. With Link Replace, you can search for exact, partial match, and self-referential links to replace or fix. The Anchor Replace allows you to identify and correct any poorly done anchors, including those with unwanted punctuations or unnecessary spaces.',
			message: 'Use the "Rescan Links" feature only when you are certain that the link statistics are incorrect. Please don\'t use it impulsively.',
            paragraphs: [
                '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.'
            ]
		}
	},
	computed: {
		
	},
	methods: {
		handleScanLinks() {
            this.$emit('on-rescan-links', true)
        },
        handleCloseModal() {
            this.$emit('on-close-modal')
        },
        goToLinksyAI() {
            window.open('https://linksyai.com/', '_blank')
        }
	},
	template: `
        <div id="rescan-links" class="d-flex flex-column flex-lg-row gap-4">
            <div class="content-box left border border-1 rounded-3 p-4 bg-white">
                <p class="welcome-text fs-6 mt-0">{{ message }}</p>
                <linksy-button @click="() => handleScanLinks()" :disabled="isScanningLinks">
                    <i v-if="isScanningLinks" class="fa fa-spinner fa-spin me-2"></i> Rescan Links
                </linksy-button>

                <hr class="mx-0 my-4" />
                <h1 class="lh-sm fs-5 mt-0">Linksy Search and Replace</h1>
                <p class="welcome-text fs-6">{{ linksyTooltip }}</p>
            </div>
            
            <div class="content-box right d-flex flex-row flex-lg-column border border-1 rounded-3">

                <div class="sidebar-tmls-image-section">
                </div>
                <div class="sidebar-tmls-text-section p-4">
                    <h1 class="lh-sm">Boost Your Internal Linking with Linksy!</h1>
                    <ul class="list-paragraphs d-flex flex-column gap-3 m-0 mb-3">
                        <li class="d-flex gap-2 m-0 fs-14px fw-normal" v-for="paragraph in paragraphs" :key="paragraph">
                            <i class="fa-solid fa-circle-check text-white"></i> <span>{{ paragraph }}</span>
                        </li>
                    </ul>
                    <button class="sidebar-tmls-button" @click="goToLinksyAI">Get Linksy!</button>
                </div>
            </div>
        </div>
    `,
}
