'use client';

import s from './styles.module.scss';
import Image, { StaticImageData } from 'next/image';
import { Preview } from '@/widgets';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/grid';
import 'swiper/css/autoplay';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Grid } from 'swiper/modules';
import { useModal } from '@core/providers/modal-provider';
import { SwiperOptions } from 'swiper/types';

export type TSlide = {
  id: number;
  name: string;
  image: StaticImageData;
};

export type TSwiperBreakpoints =
  | {
      [p: number]: SwiperOptions;
      [p: string]: SwiperOptions;
    }
  | undefined;

export const swiperDefault: TSwiperBreakpoints = {
  360: {
    slidesPerView: 1,
    spaceBetween: 10,
  },
  768: {
    slidesPerView: 2,
    spaceBetween: 30,
  },
  1024: {
    slidesPerView: 3,
    spaceBetween: 30,
  },
  1440: {
    slidesPerView: 4,
    spaceBetween: 30,
  },
};

type ExpertsSliderProps = {
  slides: TSlide[];
  swiperBreakpoints?: TSwiperBreakpoints;
};

function ExpertSlider({
  slides,
  swiperBreakpoints = swiperDefault,
}: ExpertsSliderProps) {
  const modal = useModal();

  const openPreviewModal =
    ({ image, name }: { image: StaticImageData; name: string }) =>
    () =>
      modal.showModal(
        <Preview className={s.PreviewModalContainer}>
          <Image className={s.Image} src={image} alt={name} quality={75} />
        </Preview>,
      );

  return (
    <Swiper
      className={s.Slider}
      modules={[Grid, Autoplay]}
      breakpoints={swiperBreakpoints}
      autoplay={{
        delay: 5000,
        disableOnInteraction: false,
      }}
      loop={true}
    >
      {slides.map(({ id, name, image }) => (
        <SwiperSlide key={id} className={s.Slide}>
          <Image
            src={image}
            alt={name}
            quality={75}
            width={200}
            onClick={openPreviewModal({ image, name })}
          />
        </SwiperSlide>
      ))}
    </Swiper>
  );
}

export { ExpertSlider };
