'use client';

import {Autoplay, FreeMode} from 'swiper/modules';
import {Col, Container, Row} from 'react-bootstrap';
import {
    StyleStickyContainer,
    StyledComponent,
    StyledHeroBanner,
    StyledTextImage
} from "@/components/palmal/hero-banner/hero-banner.style";
import {Swiper, SwiperSlide} from 'swiper/react';
import {useEffect, useRef, useState} from 'react';

import BodyText from "@/components/ui/BodyText";
import Button from '@/components/ui/button';
import {
    DispatchCursor
} from 'haspr-cursor';
import {ImgParallax} from "@/components/ui/img-parallax";
import ScrollTrigger from 'gsap/ScrollTrigger';
import Title from '@/components/ui/title';
import Video from "@/components/palmal/video-single/video";
import {gsap} from 'gsap';
import parse from "html-react-parser";
import useDeviceTypeMobile from "@/components/hooks/useDeviceTypeMobile";
import {useMaskScrollAnimation} from "@/components/palmal/hero-banner/useMaskScrollAnimation";
import {useSplitTextAnimation} from "@/components/palmal/hero-banner/useTextReveal";
import {
    useSwiperSlideAnimation,
} from "@/components/palmal/hero-banner/useSwiperParallaxAnimation";
import {ImgParallaxBanner} from "@/components/ui/img-parallax-banner";
import TitleUp from "@/components/ui/title-up";

// Register ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger);

const MyComponent = ({data}) => {
    const swiperRef = useRef(null);
    const sectionRef = useRef(null);
    const sectionOverviewRef = useRef(null);
    const [startSwiper, setStartSwiper] = useState(false);
    const [swiperInstance, setSwiperInstance] = useState(null);
    const titleRef = useRef(null);
    const videoRefPlay = useRef(false);
    const subtitleRef = useRef(null);
    // const backgroundRef = useRef(null);
    const videoWrapperRef = useRef(null); // Ref for the video wrapper
    const bannerRef = useRef();
    const isMobile = useDeviceTypeMobile()
    const location = typeof window !== 'undefined' ? window.location.pathname : '';
    const dispatch = DispatchCursor()


    useEffect(() => {

        const mainWrapper = document.querySelector('#hero-banner-section');

        if (mainWrapper) {
            gsap.to(mainWrapper, {
                opacity: 1,
                duration: 0.1,
                ease: 'power1.out'
            });

        }
    }, [location]);
    useSwiperSlideAnimation({
        sectionRef,
        swiperRef,
        swiperInstance,
        slideIndex: 2,
        animation: {
            duration: 0.5, // still applies to scrub smoothness
        },
    });
    // Text reveal animation
    useSplitTextAnimation({
        titleRef,
        subtitleRef,
        sectionRef,
        titleOptions: {stagger: 0.02, duration: 1.2},
        subtitleOptions: {y: 50, duration: 0.8},
    });


    useMaskScrollAnimation({
        sectionRef,
        sectionOverviewRef,
        bannerRef,
        videoWrapperRef,
        shadowSelector: '.scroll__shadow', // optional override
    });


    const imageBanner = data?.images?.list?.find(img => img.banner === 'on') || [];
    const thumbImageList = data?.images?.list?.filter(img => img.thumb === 'on') || [];
    const subTitle = data?.posts?.list?.[0]?.data?.subtitle
    const subTitleParts = subTitle.split(',').map(part => part.trim());


    return (
        <StyleStickyContainer id={'hero-banner-section'}>

            <StyledHeroBanner className={'affect'} ref={sectionRef}
                              backgroundImage={imageBanner?.full_path || "/images/static/headerimage.png"}>
                <ImgParallaxBanner parallax objectfit={'cover'}
                                   src={imageBanner?.full_path || "/images/static/headerimage.png"}
                                   alt={imageBanner?.short_title || "Palmal Group of Industries Ltd - Powering Business Globally"}/>
                <Container>
                    <Row>
                        <Col
                            md={{span: 10, offset: 1}}
                            className={'title-wrapper'}>
                            {
                                data?.section_data?.subtitle &&
                                <div ref={titleRef} className="">
                                    <Title
                                        width={'100%'}
                                        color={'#402D17'}
                                        text={data?.section_data?.subtitle}
                                        tag={'h0'}
                                        margin={'0 0 '}
                                    />
                                </div>
                            }

                            {
                                data?.section_data?.short_desc &&
                                <p ref={subtitleRef}>
                                    {parse(data?.section_data?.short_desc)}
                                </p>

                            }

                        </Col>
                    </Row>
                </Container>

                <div
                    ref={sectionOverviewRef}
                    className="image-slier-hero-banner">
                    <Swiper
                        ref={swiperRef}
                        slidesPerView={3.2}
                        spaceBetween={60}
                        centeredSlides={true}
                        onSwiper={setSwiperInstance}
                        loop={true}
                        loopAdditionalSlides={2}
                        freeMode={true}
                        autoplay={
                            startSwiper === true
                        }
                        speed={7000}
                        breakpoints={{
                            320: {
                                slidesPerView: 1.2,
                                spaceBetween: 15,
                            },
                            767: {
                                slidesPerView: 2.2,
                                spaceBetween: 20,
                            },
                            1024: {
                                slidesPerView: 3.2,
                                spaceBetween: 60,
                            }
                        }}
                        modules={[FreeMode, Autoplay]}
                        className="about-slider_mask w-slider-mask">
                        {[...thumbImageList, ...thumbImageList].map((image, index) => (
                            <SwiperSlide
                                key={index}
                                className="slider-item"
                            >
                                <div className="single-partners-image">
                                    <div className="image-wrapper">
                                        <ImgParallax src={image?.full_path || '/images/static/blur.jpg'}
                                                     alt={image?.short_title || `Partner ${index + 1}`}/>

                                    </div>
                                </div>
                            </SwiperSlide>
                        ))}
                    </Swiper>
                </div>
            </StyledHeroBanner>
            <StyledTextImage className="text-image-section">
                <div className="text-image-section-wrapper">
                    <Container>
                        <Row>
                            <Col md={10}>
                                {
                                    subTitleParts[0] &&
                                    <TitleUp
                                        width={'100%'}
                                        color={'#402D17'}
                                        text={subTitleParts[0]}
                                        tag={'h2'}
                                        margin={'0 0'}
                                    />

                                }


                                <div className="d-flex w-100 whole-title-wrapper justify-content-between position-relative">

                                    {
                                        subTitleParts[1] &&
                                        <TitleUp
                                            className={'left-side-text-offse'}
                                            width={'100%'}
                                            color={'#402D17'}
                                            text={subTitleParts[1]}
                                            tag={'h2'}
                                            animate={true}
                                            margin={'0 0'}
                                        />

                                    }

                                    <div className={'side-text-blank'} style={{width: '100%'}}></div>
                                    {
                                        subTitleParts[2] &&
                                        <TitleUp
                                            width={'100%'}
                                            animate={true}
                                            color={subTitleParts[2]}
                                            text={"into"}
                                            tag={'h2'}
                                            margin={'0 0'}
                                        />
                                    }

                                </div>
                                {
                                    subTitleParts[3] &&
                                    <TitleUp
                                        width={'100%'}
                                        color={'#402D17'}
                                        text={subTitleParts[3]}
                                        tag={'h2'}
                                        animate={true}
                                        margin={'0 0 40px'}
                                    />
                                }

                            </Col>


                            <Col className={'content-text-button-wrapper'} md={{span: 6, offset: 3}}>
                                <Title
                                    width={'100%'}
                                    color={'#402D17'}
                                    text={data?.posts?.list?.[0]?.data?.description || ''}
                                    tag={'p'}
                                    animate={true}
                                    margin={'0 0 40px'}
                                />
                            </Col>
                            {
                                data?.posts?.list?.[0]?.data?.short_desc &&
                                <Col md={3} className={'mt-4 text-center'}>
                                    <Button src={data?.posts?.list?.[0]?.data?.short_desc || '/'} text={'Learn More'}
                                            variant={'circle'} color={'#402D17'}
                                            background={'transparent'}/>


                                </Col>
                            }


                        </Row>
                    </Container>

                    <StyledComponent className={'scroll-Bar-banner'} ref={bannerRef}>
                        <div className="scroll__img">
                            <div ref={videoWrapperRef}
                                 className="video-content">
                                <Video play={true} data={data?.posts?.list?.[0]}/>
                            </div>
                        </div>
                    </StyledComponent>
                </div>
            </StyledTextImage>
        </StyleStickyContainer>
    );
};


export default MyComponent;