import React from 'react'
import PropTypes from 'prop-types'
import { css } from '@emotion/css'
import Carousel from 'react-multi-carousel'
import 'react-multi-carousel/lib/styles.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleRight, faAngleLeft } from '@fortawesome/free-solid-svg-icons'
import { styled } from 'twin.macro';

const Slide = (props) => {
  const { data = null, amountItem = 1, marginBottom = 0, autoPlay = false, theme = { primary: '#26D496' } } = props

  const responsive = {
    desktop: {
      breakpoint: { max: 3000, min: 0 },
      items: amountItem,
    }
  }

  const StyleArrow = styled.div(({ right }) => [
    `
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #383633;
    opacity: 0.6;
    border-radius: 50%;
    z-index: 99;
    position: absolute;
    color: #ffffff;
    cursor: pointer;
    ${right ? `right: 10px` : `left: 10px`}
  `
  ]);

  const CustomArrow = ({ onClick, ...rest }) => {
    const { right } = rest;

    return (
      <StyleArrow onClick={onClick} right={right}>
        {right ? (
          // <FontAwesomeIcon
          //   icon={faAngleRight}
          //   className={css`
          //     font-size: 18px;
          //   `}
          // />
          <i className="icon-left"/>
        ) : (
          <FontAwesomeIcon
            icon={faAngleLeft}
            className={css`
              font-size: 18px;
            `}
          />
        )}
      </StyleArrow>
    );
  };

  const CustomDot = ({ onClick, ...rest }) => {
    const { active } = rest;
    return (
      <button
        className={`${css`
          background: ${active ? theme.primary : '#F9F9F9'};
          width: 15px;
          height: 15px;
          border: none;
          margin: 10px 5px;
          border-radius: 50%;
        `}`}
        onClick={() => onClick()}></button>
    );
  };

  return (
    <div
      className={`${css`
        margin-bottom: ${marginBottom}px;
      `}`}>
      <Carousel
        responsive={responsive}
        showDots={true}
        customRightArrow={<CustomArrow right={true} />}
        customLeftArrow={<CustomArrow right={false} />}
        autoPlay={autoPlay}
        infinite={true}
        customDot={<CustomDot />}>
        {data.map((item, index) => (
          <div
            className={`${css`
              display: flex;
              justify-content: center;
              align-items: center;
              background: black;
              aspect-ratio: 3/2;
            `}`}
            key={index}>
            <img
              src={item}
              alt={'image' + index}
              className={`${css`
                width: 100%;
                height: 100%;
                object-fit: contain;
              `}`}
            />
          </div>
        ))}
      </Carousel>
    </div>
  );
}

Slide.propTypes = {
  data: PropTypes.array,
  amountItem: PropTypes.number,
  marginBottom: PropTypes.number,
  autoPlay: PropTypes.bool,
  theme: PropTypes.shape({
    primary: PropTypes.string,
  }),
}

Slide.defaultProps = {
  data: [],
  amountItem: 1,
  marginBottom: 0,
  autoPlay: false,
  theme: {
    primary: '#26D496',
  },
}

export default Slide
