import { homeHero } from '@frontend/content/home-page';
import type { HeroSlideProps, HomeRotatingTextProps } from '@frontend/types/pages/home';

/** Matches Codera `index-03.html` hero `slider-fade1` owl options. */
const heroCarouselOptions = {
    loop: true,
    autoplay: true,
    autoplayTimeout: 6000,
    responsiveClass: true,
    smartSpeed: 1500,
    dots: true,
    nav: false,
    margin: 0,
    animateOut: 'fadeOut',
    animateIn: 'fadeIn',
    responsive: { '0': { items: 1 }, '1400': { items: 1 } },
};

type HomeBannerProps = {
    readonly heroSlides: readonly HeroSlideProps[];
    readonly rotatingText: HomeRotatingTextProps;
};

type HomeBannerSlideProps = {
    readonly slide?: HeroSlideProps;
    readonly rotatingText: HomeRotatingTextProps;
    readonly enableJarallax?: boolean;
    readonly inCarousel?: boolean;
};

function resolveHeading(slide?: HeroSlideProps): string {
    if (!slide) {
        return homeHero.heading;
    }

    return slide.title?.trim() ?? '';
}

function resolveDescription(slide?: HeroSlideProps): string {
    if (!slide) {
        return homeHero.description;
    }

    return slide.description?.trim() ?? '';
}

function slideBackgroundImage(slide?: HeroSlideProps): string {
    if (!slide) {
        return homeHero.backgroundImage;
    }

    if (slide.mediaType === 'image') {
        return slide.mediaUrl;
    }

    return slide.posterUrl;
}

function slideHasCounter(slide?: HeroSlideProps): slide is HeroSlideProps & {
    readonly counterValue: string;
    readonly counterText: string;
} {
    return Boolean(slide?.counterValue && slide?.counterText);
}

function HeroRotatingCircleIcon({ link }: { readonly link: string | null }) {
    const image = <img src={homeHero.bannerLogo} alt="" title="" className="w-60px" />;

    if (link) {
        return (
            <a href={link} className="video video_btn" target="_blank" rel="noopener noreferrer">
                {image}
            </a>
        );
    }

    return <span className="video video_btn d-inline-block">{image}</span>;
}

function slideVideoSrc(slide?: HeroSlideProps): string | undefined {
    if (!slide) {
        return homeHero.videoHref;
    }

    if (slide.mediaType === 'video') {
        return `mp4:${slide.mediaUrl}`;
    }

    return undefined;
}

function HomeBannerSlide({ slide, rotatingText, enableJarallax = true, inCarousel = false }: HomeBannerSlideProps) {
    const backgroundImage = slideBackgroundImage(slide);
    const videoSrc = enableJarallax ? slideVideoSrc(slide) : undefined;
    const heading = resolveHeading(slide);
    const description = resolveDescription(slide);
    const textPathId = slide ? `hero-text-path-${slide.id}` : 'textPath';

    const layoutClass = inCarousel ? 'min-vh-100' : 'full-screen top-position1';

    return (
        <section
            className={`bg-secondary ${layoutClass} banner-style02 p-0 bg-img cover-background secondary-overlay${enableJarallax ? ' jarallax' : ''}`}
            data-overlay-dark="8"
            style={{ backgroundImage: `url(${backgroundImage})` }}
            {...(enableJarallax
                ? {
                      'data-jarallax': '',
                      'data-speed': '0.8',
                      ...(videoSrc ? { 'data-video-src': videoSrc } : {}),
                  }
                : {})}
        >
            <div className="container-fluid d-flex flex-column pt-5 pb-5 py-sm-8 py-md-0 px-lg-8 position-relative z-index-9">
                <div className="row min-vh-100 align-items-center align-items-md-end pb-md-8">
                    <div className="hero-title">
                        <h1 className="display-1 font-weight-800 lh-1 mb-0 text-white text-uppercase w-xl-80 w-xxl-60">
                            {heading}
                        </h1>
                    </div>

                    <div className="col-md-4 col-xl-3 d-none d-md-block">
                        <div className="banner-text rotating">
                            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
                                <path
                                    id={textPathId}
                                    d="M 85,0 A 85,85 0 0 1 -85,0 A 85,85 0 0 1 85,0"
                                    transform="translate(100,100)"
                                    fill="none"
                                    strokeWidth="0"
                                ></path>
                                <g fontSize="10px">
                                    <text textAnchor="start">
                                        <textPath className="coloring" xlinkHref={`#${textPathId}`} startOffset="0%">
                                            {rotatingText.hero}
                                        </textPath>
                                    </text>
                                </g>
                            </svg>
                            <div className="banner-icon">
                                <div className="story-video">
                                    <HeroRotatingCircleIcon link={slide?.link ?? null} />
                                </div>
                            </div>
                        </div>
                    </div>

                    {slideHasCounter(slide) ? (
                        <div className="col-md-8 col-xl-5 d-none d-md-block">
                            <div className="d-flex align-items-end banner-count">
                                <div className="flex-shrink-0 counter-no ls-minus-2px">
                                    <div className="odometer font-weight-600 border-text" data-count={slide.counterValue}>
                                        1
                                    </div>
                                </div>
                                <div className="flex-grow-1">
                                    <p className="text-primary mb-0 mt-n10 display-28 w-lg-100 w-xxl-45 opacity8 lh-base">
                                        {slide.counterText}
                                    </p>
                                </div>
                            </div>
                        </div>
                    ) : null}

                    <div className="col-lg-4 d-none d-xl-block">
                        <div className="d-flex justify-content-end">
                            <p className="display-29 font-weight-500 text-white opacity8 w-xxl-70 mb-1-9">{description}</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

export function HomeBanner({ heroSlides, rotatingText }: HomeBannerProps) {
    if (heroSlides.length === 0) {
        return <HomeBannerSlide rotatingText={rotatingText} />;
    }

    if (heroSlides.length === 1) {
        return <HomeBannerSlide slide={heroSlides[0]} rotatingText={rotatingText} />;
    }

    return (
        <section className="full-screen top-position1 p-0">
            <div
                className="slider-fade1 hero-banner-carousel owl-carousel owl-theme w-100 min-vh-100"
                data-owl={JSON.stringify(heroCarouselOptions)}
            >
                {heroSlides.map((slide) => (
                    <div key={slide.id} className="item">
                        <HomeBannerSlide
                            slide={slide}
                            rotatingText={rotatingText}
                            enableJarallax={false}
                            inCarousel
                        />
                    </div>
                ))}
            </div>
        </section>
    );
}