import React from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';

// import Swiper core and required modules
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';

import { Card, CardBody, CardHeader } from 'reactstrap';

import JKPayment from './JKPayment';

SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

const JKPaymentHistorySwiper = ({ payments, goToNextPage }) => {
  const { t } = useTranslation('account');
  return (
    <>
      <Swiper
        spaceBetween={0}
        slidesPerView={1}
        onSlideChange={(e) => console.log('slide change', e)}
        onSlideNextTransitionEnd={swiper => {
          if(swiper.isEnd){
            goToNextPage()
          }
        }}
        pagination={{
          clickable: true,
          type: 'custom'
        }}
        navigation={{
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }}
        data-testid="paymentSwiper"
      >
        {payments.map((payment, index) => (
          <SwiperSlide key={`people-swiper-item-${payment.id}`}>
            <Card className="swiper-card">
              <CardHeader className="bg-200 text-center">
                <h5 className="d-inline-block align-top mt-1">{t('payments.payment')}</h5>
              </CardHeader>
              <CardBody>
                <JKPayment payment={payment} />
              </CardBody>
            </Card>
          </SwiperSlide>
        ))}
      </Swiper>
      <div className="py-4 px-6 bg-white border-top w-100 fixed-bottom">
        <div className="swiper-pagination" />
        <div className="swiper-button-prev" />
        <div className="swiper-button-next" />
      </div>
    </>
  );
};

JKPaymentHistorySwiper.propTypes = {
  payments: PropTypes.arrayOf(PropTypes.instanceOf(Object)),
  goToNextPage: PropTypes.func
};

export default JKPaymentHistorySwiper;
