import React from "react";
import { Carousel } from 'antd';
import './style.scss';
import CapImage from '@capillarytech/cap-ui-library/CapImage';
import CapButton from '@capillarytech/cap-ui-library/CapButton';
import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
import { CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');

const arrowStyle = {
  background: 'rgba(0, 0, 0, 0.1)',
  display: 'block',
  position: 'absolute',
  color: CAP_WHITE,
  padding: 0,
  height: 24,
  width: 24,
  borderRadius: '50%',
};

const Arrow = (props) => {
  const {
    className, style, onClick, extraStyle, type,
  } = props;
  return (
    <CapButton
      className={className}
      onClick={onClick}
      type="link"
      style={{
        ...style,
        ...arrowStyle,
        ...extraStyle,
      }}
    >
      <CapIcon
        type={type}
      />
    </CapButton>
  );
};

const settings = {
  nextArrow: (
    <Arrow
      extraStyle={{
        right: 0,
        minWidth: 'unset'
      }}
      type="chevron-right"
    />
  ),
  prevArrow: (
    <Arrow
      extraStyle={{
        left: 0,
        zIndex: 1,
        minWidth: 'unset'
      }}
      type="chevron-left"
    />
  ),
};

const CarouselComponent = ({
  imageCarousel,
}) => {
  let carousel = React.createRef();
  const next = () => carousel.next();
  const previous = () => carousel.prev();

  const prop = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 0.5,
    arrows: true,
    swipeToSlide: true,
    focusOnSelect: true,
    rows: 1,
  };

  const imageCarouselLength = imageCarousel.length;

  return (
    <div style={{ position: 'relative' }} className={`template-carousel ${imageCarouselLength ? 'single-img' : ''}`}>
      <Carousel ref={(node) => (carousel = node)} {...prop} {...settings}>
        {
          imageCarousel.map(({
            actionLabel,
            imageUrl = lineImgPlaceholder,
          }) => (
            <div className="carousel-section">
              <CapImage
                src={imageUrl}
                alt="brand-name"
                rest={{
                  style: {
                    maxWidth: '100%',
                  },
                }}
              />
              <span
                style={{
                  position: 'relative',
                  bottom: 90,
                  background: 'rgba(94, 108, 132, 0.33)',
                  borderRadius: '42%',
                  padding: '0 12px',
                  color: CAP_WHITE,
                }}
              >
                {actionLabel}
              </span>
            </div>
          ))
        }
      </Carousel>
    </div>
  );
};

export default CarouselComponent;
