'use client';
import React from 'react';
import cn from '@/lib/merge-clsx';

import Container from '@/components/layout/Container';
import SwiperElement from '@/components/shared/SwiperElement';

import GalleryCard from './GalleryCard';



const Gallery: React.FC<IGallery> = ({
  title,
  description,
  subtitle,
  gallery
}) => {
  const Description = (
    <p className="  md:max-w-[16rem] lg:max-w-full lg:px-4 md:line-clamp-[7] lg:line-clamp-6">
      {description}
    </p>
  );
  const Heading = (
    <div className="text-4xl md:text-3xl lg:text-4xl *:leading-[3rem] lg:px-4 *:line-clamp-2 lg:min-h-48">
      <h1 className="font-semibold font-serif">{title}</h1>
      <p className="md:mt-2 lg:my-5 font-light font-serif">{subtitle}</p>
    </div>
  );
  const stylesOfContent = {
    order: 4
  };

  const Desktoplayout = () => {
    return (
      <div className="hidden md:grid grid-cols-3 gap-2 md:gap-6 overflow-auto no-scrollbar *:md:max-w-xs mt-4 sm:place-content-center md:w-fit md:mx-auto">
        <div
          className="hidden md:inline-block text-right"
          style={stylesOfContent}>
          {Heading}
        </div>
        <div
          className="hidden md:inline-block gap-div"
          style={stylesOfContent}
        />
        <div className="hidden md:inline-block" style={stylesOfContent}>
          {Description}
        </div>
        {gallery &&
          gallery.map(({ image, title }, index) => {
            return (
              <GalleryCard
                image={image}
                style={{
                  order: index + 1
                }}
                key={index}
                classname={cn(
                  `${index <= 1 ? 'col-span-2 md:col-span-1' : ''}
                   w-full
                   ${index === 1 ? 'md:top-[5.5em] lg:top-24' : ''}
                  ${index % 6 === 4 ? 'md:bottom-[6.6em] lg:bottom-28' : ''}
                  ${index >= 6 && index % 6 === 1 ? 'md:bottom-[6.6em] lg:bottom-28' : ''}
                   `
                )}
                title={title}
              />
            );
          })}
      </div>
    );
  };
  const Mobilelayout = () => (
    <div className="md:hidden">
      {Heading}
      {Description}
      <SwiperElement
        className="mt-4 max-md:[&>.swiper]:!overflow-visible [&_.swiper-wrapper]:!gap-2"
        options={{
          slidesPerView: 'auto',
          grabCursor: true,
          pagination: {
            type: 'fraction',
            variant: 'primary',
            position: 'bottom',
            align: 'center'
          }
        }}>
        {Array.from({ length: Math.ceil(gallery.length / 3) }).map((_, i) => (
          <SwiperElement.Slide key={i} className="sm:max-w-[50%] w-full">
            <div className="grid grid-cols-2 gap-2">
              {gallery.slice(i * 3, i * 3 + 3).map(({ image, title }, j) => (
                <GalleryCard
                  key={j}
                  image={image}
                  title={title}
                  classname={cn(j === 0 ? 'col-span-2' : '')}
                />
              ))}
            </div>
          </SwiperElement.Slide>
        ))}
      </SwiperElement>
    </div>
  );
  return (
    <Container as="section" className="overflow-hidden !my-16 md:!my-20">
      <Mobilelayout />
      <Desktoplayout />
    </Container>
  );
};

export default Gallery;
