<script>
import PortalHeader from '@/views/portal/header.vue'
import PortalFooter from '@/views/portal/footer.vue'

export default {
    name: 'HomeComponent',
    components: {
        PortalHeader,
        PortalFooter
    },
    data() {
        return {
            slides: [
                {
                    image: 'assets/img/bg.jpg',
                    title: 'CCTV STREAM',
                    subtitle1: 'Selamat Datang di',
                    subtitle2: 'Layanan CCTV Stream dengan Face Recognition pada wilayah Kantor PLN UID KALIMANTAN BARAT'
                },
                {
                    image: 'assets/img/bg2.jpg',
                    title: 'CCTV STREAM',
                    subtitle1: 'Selamat Datang di',
                    subtitle2: 'Layanan CCTV Stream dengan Face Recognition pada wilayah Kantor PLN UID KALIMANTAN BARAT'
                }
            ],
            scrollPosition: 10
        }
    },
    computed: {
        routeName() {
            return this.$route.name
        },
        isLoggedIn() {
            return (
                localStorage.getItem('authToken') ||
                sessionStorage.getItem('authToken')
            )
        }
    },
    methods: {
        handleScroll() {
            this.scrollPosition = window.scrollY * 0.4 // Adjust the multiplier for desired parallax effect
        },
        scrollToSection() {
            const section = document.getElementById('sectionNext')
            section.scrollIntoView({ behavior: 'smooth' })
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll)
    }
}
</script>

<template>
    <portal-header />

    <section>
        <div id="carousel-captions" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div v-for="(slide, index) in slides" :key="index" :class="['carousel-item', { active: index === 0 }]">
                    <img class="d-block w-100 slide-img" :src="slide.image" :alt="`Slide ${index + 1}`" />
                    <div class="carousel-caption-background d-block"></div>
                    <div class="carousel-caption d-block">
                        <div class="info-carousel" :style="{
                            transform: `translateY(${scrollPosition}px)`
                        }">
                            <h1 class="mb-3">{{ slide.title }}</h1>
                            <img src="assets/img/logo.png" alt="logo">
                            <h4 class="mt-3">
                                {{ slide.subtitle1 }}
                                <br>
                                {{ slide.subtitle2 }}
                            </h4>
                            <router-link v-if="isLoggedIn" to="./dashboard"
                                class="mt-5 py-3 px-5 btn btn-outline-yellow border-radius text-primary-fg">
                                <span>
                                    <i class="fa fa-arrow-right me-1"></i>
                                    Start
                                </span>
                            </router-link>
                            <router-link v-else to="./login"
                                class="mt-5 py-3 px-5 btn btn-outline-yellow border-radius text-primary-fg">
                                <span>
                                    <i class="fa fa-arrow-right me-1"></i>
                                    Start
                                </span>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carousel-captions" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon d-none d-md-block" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carousel-captions" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon d-none d-md-block" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </a>

        </div>
    </section>

    <portal-footer />
</template>
