import React, { useRef, useState } from 'react';
import Link from '../Link';
import { BenefitsFormat as BenefitsFormatI } from '../../models/common';
import styles from './Benefits.module.scss';
import { Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Swiper as SwiperI } from 'swiper/types/index';
import 'swiper/css';

export type Props = {
  title: string;
  benefits: BenefitsFormatI[];
};

const Benefits = (props: Props): JSX.Element => {
  const { title, benefits } = props;
  const swiperRef = useRef(null);

  return (
    <div className={styles.benefits}>
      <div className={styles.container}>
        <div className={styles.title}>
          <h1>{title}</h1>
        </div>
        <div className={styles.content}>
          <Swiper
            // @ts-ignore
            ref={swiperRef}
            className={styles.slider}
            modules={[Pagination]}
            pagination={{
              clickable: true,
              renderBullet: (index: number, className = '') => {
                return (
                  '<span class="' +
                  `h6_links ${styles.h6_links} ${styles.sliderItem_trigger} ${className}` +
                  '">' +
                  benefits[index].title +
                  '</span>'
                );
              },
            }}
            autoHeight={true}
          >
            <div className={styles.sliderContainer}>
              {benefits.map((element, idx) => {
                return (
                  <SwiperSlide key={idx} className={styles.sliderItem}>
                    <div className={`text_2 ${styles.sliderItem_content}`}>
                      {element.text}
                    </div>
                    {idx !== benefits?.length - 1 ? (
                      <div
                        className="swiper-next"
                        onClick={() => {
                          // @ts-ignore
                          const swiper = swiperRef?.current?.swiper as SwiperI;
                          swiper?.slideNext();
                        }}
                      >
                        <Link
                          href={undefined}
                          type={element?.link?.style?.type}
                          iconSize={element?.link?.style?.iconSize}
                          textSize={element?.link?.style?.textSize}
                          isIconFirst={element?.link.style?.isIconFirst}
                          isExternal={element?.link.isExternal}
                        >
                          {element?.link?.label || ''}
                        </Link>
                      </div>
                    ) : null}
                  </SwiperSlide>
                );
              })}
            </div>
          </Swiper>
        </div>
      </div>
    </div>
  );
};

export default Benefits;