const LinksySearchReplaceSetup = {
    name: 'LinksySearchReplaceSetup',
    components: {
        LinksyButton,
        NotificationModal
    },
    props: {
      isScanningLinks: Boolean,
      isNotificationOpened: Boolean,
      progress: Number,
      totalLinks: Number
    },
    data() {
      return {
        welcomeMessage: "Welcome to Linksy Search and Replace! Easily search and replace links, post titles, anchors in your content.",
        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.'
        ]
      };
    },
    methods: {
      handleScanLinks() {
        this.$emit('on-scan-links')
      },
      handleCloseModal() {
        this.$emit('on-close-modal')
      },
      goToLinksyAI() {
        window.open('https://linksyai.com/', '_blank')
      }
    },
    template: `
        <div class="container p-0 d-flex flex-column flex-lg-row gap-4">
            <div class="content-box left p-4 w-100">
                <h1 class="title mt-0">Brought to you by <a class="title-link" target="_blank" href="https://linksyai.com/">Linksy AI</a></h1>
                <p class="welcome-text">{{ welcomeMessage }}</p>

                <div>
                  <div v-if="!isScanningLinks">
                    <p class="welcome-text">Click the Scan Links button to start!</p>
                    <!-- <linksy-button v-if="progress == 100" @click="goToSearchReplace">Continue</linksy-button> -->
                    <linksy-button @click="handleScanLinks">Scan Links</linksy-button>
                  </div>
                  <div v-else>
                    <div class="progress-texts d-flex gap-2 mb-2">
                      <span>{{ progress }}%</span>
                      <i class="fa fa-spin fa-spinner text-primary fs-6"></i>
                      <div class="linksy-animation">Scanning Links...</div>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" :style="{ width: progress + '%' }">
                            <span class="progress-label"></span>
                        </div>
                    </div>
                  </div>
                </div>
            </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>
    `,
    mounted() {
      history.pushState(
				{},
				'URL Rewrite Example',
				LINKSYAI_SAR.tools_url + '?page=Linksy-search-and-replace&setup=0'
			)
    },
};