'use client';

import { CSSPlugin, gsap } from 'gsap';
import React, { useMemo, useRef, useState } from 'react';
import { Col, Container, Row } from 'react-bootstrap';
import {
	Autoplay,
	FreeMode,
	Grid,
	Mousewheel,
	Navigation,
	Pagination,
} from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';

import { StyledPartners } from '@/components/palmal/partner-slider/partners.style';
import BoydHero from '@/components/ui/BoydHero';
import BusinessSingle from '@/components/ui/single/BusinessSingle';
import TitleUp from '@/components/ui/title-up';
import { useShowSetting } from '@/core/context/ShowSettingProvider';
import { useInView } from 'framer-motion';
import { CSSRulePlugin } from 'gsap/dist/CSSRulePlugin';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import parse from 'html-react-parser';
import SwiperCore from 'swiper';

SwiperCore.use([Autoplay, Pagination]);
gsap.registerPlugin(ScrollTrigger, CSSPlugin, CSSRulePlugin);

// Generate unique ID for each component instance
let instanceCounter = 0;

const Partners = ({ data, version, award, mainIndex }) => {
	const scrollInstanceRef = useShowSetting();
	const sectionRef = useRef(null);
	const containerRef = useRef(null);
	const observerRef = useRef(null);
	const [isInView, setIsInView] = useState(false);
	const [swiperInstance, setSwiperInstance] = useState(null);
	const [animationComplete, setAnimationComplete] = useState(false);
	const [componentId] = useState(() => `partners-${++instanceCounter}`);

	const { ref, inView } = useInView({
		triggerOnce: true,
		threshold: 0.5,
	});

	// Memoize the split result to prevent unnecessary recalculations
	const result = useMemo(() => {
		const bigText = data?.section_data?.description || '';
		return bigText.split(',');
	}, [data?.section_data?.description]);

	// Memoize the subtitle to prevent unnecessary re-renders
	const subtitle = useMemo(
		() => data?.section_data?.subtitle,
		[data?.section_data?.subtitle],
	);

	// Memoize the short description to prevent unnecessary re-renders
	const shortDesc = useMemo(
		() => data?.section_data?.short_desc,
		[data?.section_data?.short_desc],
	);

	// Memoize the award items to prevent unnecessary re-renders
	const awardItems = useMemo(
		() =>
			data?.posts?.list?.map((e, index) => (
				<SwiperSlide key={index}>
					<Col md={12} className={'fade-up p-0'}>
						<BusinessSingle
							link={false}
							img={e?.images}
							title={e?.data?.title}
							text={e?.data?.subtitle}
						/>
					</Col>
				</SwiperSlide>
			)),
		[data?.posts?.list],
	);

	console.log('Rendering Partners component - data:', data, 'award:', award);

	// Memoize the partner images to prevent unnecessary re-renders
	const partnerImages = useMemo(
		() =>
			data?.images?.list?.map((e, index) => (
				<SwiperSlide key={index}>
					<Col md={12} className={`p-0 ${index + 1}`} key={index}>
						<div className="single-partners-image">
							<div className="image-wrapper">
								<img
									src={e?.full_path}
									alt={e?.short_title || 'Partners'}
									loading="lazy"
								/>
							</div>
						</div>
					</Col>
				</SwiperSlide>
			)),
		[data?.images?.list],
	);

	const images = data?.images?.list?.map(e => e?.full_path) || [];

	const memoizedSlides = useMemo(() => {
		return images.map((image, index) => (
			<SwiperSlide key={index}>
				<img src={image} alt={`Partner ${index + 1}`} />
			</SwiperSlide>
		));
	}, [images]);

	// Memoize the mousewheel config to prevent unnecessary re-renders
	const mousewheelConfig = useMemo(
		() => ({
			releaseOnEdges: true,
			sensitivity: 1.5,
			thresholdDelta: 1.5,
			thresholdTime: 5,
			eventsTarget: `.partners-${mainIndex}`,
		}),
		[mainIndex],
	);
	// Memoize the container style to prevent unnecessary re-renders

	return (
		<StyledPartners
			ref={sectionRef}
			data-scroll-section
			className={`partners partners-${mainIndex}`}>
			<BoydHero />
			<div className="element-fixed-partners">
				<img
					src="/images/static/partners-fixed.png"
					className={'parallax'}
					alt=""
				/>
			</div>

			<Container>
				<Row className={'partners__title'}>
					<Col md={12}>
						<TitleUp
							text={parse(subtitle)}
							tag={'h2'}
							animate={true}
							margin={'0 0 0'}
						/>
						<TitleUp
							text={parse(shortDesc)}
							tag={'h2'}
							animate={true}
							margin={'0 0 50px'}
						/>
					</Col>
				</Row>
			</Container>
			<Container className={'partners-images'} ref={containerRef}>
				<Row>
					{award ? (
						<>
							<Col md={12}>
								<Swiper
									slidesPerView={4}
									slidesPerGroup={1}
									spaceBetween={15}
									onSwiper={setSwiperInstance}
									loop={true}
									autoplay={false}
									speed={1000}
									mousewheel={mousewheelConfig}
									pagination={{
										clickable: true,
									}}
									navigation={{
										prevEl: `.partner_prev_${componentId}`,
										nextEl: `.partner_next_${componentId}`,
									}}
									freeMode={false}
									breakpoints={{
										320: {
											slidesPerView: 2,
										},
										768: {
											slidesPerView: 3,
											spaceBetween: 15,
										},
										1024: {
											slidesPerView: 4,
											spaceBetween: 15,
										},
									}}
									modules={[
										Navigation,
										Pagination,
										Mousewheel,
										Autoplay,
									]}
									className="about-slider_mask w-slider-mask">
									{data?.posts?.list?.length > 0 &&
										awardItems}
								</Swiper>
							</Col>
						</>
					) : (
						<Col md={12}>
							<Swiper
								slidesPerView={8}
								grid={{
									rows: 2,
									fill: 'row', // Important for correct row filling
								}}
								slidesPerGroup={8}
								spaceBetween={25}
								onSwiper={setSwiperInstance}
								loop={true}
								autoplay={false}
								// loopAddBlankSlides={true}
								// loopAdditionalSlides={2}
								cssMode={false}
								speed={1000}
								pagination={{
									clickable: true,
								}}
								navigation={{
									prevEl: `.partner_prev_${componentId}`,
									nextEl: `.partner_next_${componentId}`,
								}}
								freeMode={false}
								breakpoints={{
									320: {
										slidesPerView: 3,
										spaceBetween: 15,
										freeMode: true,
										speed: 2000,
										loop: true,
										cssMode: false,
										loopAdditionalSlides: 2,
										grid: {
											rows: 2,
											fill: 'row', // Important for correct row filling
										},
									},
									768: {
										slidesPerView: 4,
										spaceBetween: 15,
										grid: {
											rows: 3,
											fill: 'row', // Important for correct row filling
										},
									},
									1024: {
										slidesPerView: 8,
										spaceBetween: 25,
										grid: {
											rows: 2,
											fill: 'row', // Important for correct row filling
										},
									},
								}}
								modules={[Navigation, Grid, FreeMode, Autoplay]}
								className="about-slider_mask w-slider-mask">
								{data?.images?.list?.length > 0 &&
									partnerImages}
							</Swiper>
						</Col>
					)}
				</Row>
			</Container>
		</StyledPartners>
	);
};

export default React.memo(Partners);