'use client';

import s from './styles.module.scss';
import { Button, Icons } from '@shared/ui';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/grid';
import 'swiper/css/autoplay';
import Image, { StaticImageData } from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Grid } from 'swiper/modules';
import lic0 from '@public/images/licence/dtr-strahovka.png';
import lic1 from '@public/images/licence/dtr-eac-0.png';
import lic2 from '@public/images/licence/dtr-eac-1.png';
import lic3 from '@public/images/licence/dtr-eac-2.png';
import lic4 from '@public/images/licence/dtr-eac-3.png';
import { useModal } from '@core/providers/modal-provider';
import { Preview } from '@/widgets';

const slidesData = [
  {
    id: 0,
    name: 'Страховое свидетельство',
    image: lic0,
  },
  {
    id: 1,
    name: 'Сертификат соответствия',
    image: lic1,
  },
  {
    id: 2,
    name: 'Разрешение система качества ЕАС',
    image: lic2,
  },
  {
    id: 3,
    name: 'Приложение к разрешению ЕАС',
    image: lic3,
  },
  {
    id: 4,
    name: 'Приложение к разрешению ЕАС',
    image: lic4,
  },
];

const swiperBreakpoints = {
  360: {
    slidesPerView: 1,
    spaceBetween: 10,
  },
  768: {
    slidesPerView: 2,
    spaceBetween: 30,
  },
  1024: {
    slidesPerView: 2,
    spaceBetween: 30,
  },
  1440: {
    slidesPerView: 2,
    spaceBetween: 30,
  },
};

function About() {
  const modal = useModal();
  const openVideoModal = () =>
    modal.showModal(
      <Preview className={s.VideoModalContainer}>
        <iframe
          width='560'
          height='315'
          src='https://www.youtube.com/embed/-CgIZzd4qNY?si=wSZSMXolujovqQxT'
          title='YouTube video player'
          frameBorder='0'
          allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
          referrerPolicy='strict-origin-when-cross-origin'
          allowFullScreen
        ></iframe>
      </Preview>,
    );

  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 (
    <section className={s.About}>
      <div className={s.Inner}>
        <h2 className={s.Title}>О компании</h2>
        <div className={s.Block}>
          <div className={s.Card}>
            <div className={s.Left}>
              <p>5.000.000 руб.</p>
              <p>
                Страхование компании <br />
                <strong>&#34;ДИ ТРАСО&#34;</strong>
              </p>
            </div>
            <div className={s.Right}>
              <p> 300.000 руб. </p>
              <p>
                Индивидуальное страхование <br />
                <strong>специалиста</strong>
              </p>
            </div>
            <div className={s.Bottom}>
              <Button className={s.Btn} onClick={openVideoModal}>
                <Icons.Youtube className={s.Icon} />
                Посмотреть видео о нас
              </Button>
            </div>
          </div>
          <Swiper
            className={s.Slider}
            modules={[Grid, Autoplay]}
            breakpoints={swiperBreakpoints}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
            }}
            loop={true}
          >
            {slidesData.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>
        </div>
      </div>
    </section>
  );
}

export { About };
