// @ts-nocheck
/* eslint-disable */

import React, { ReactNode, useEffect, useState } from 'react'
import { StyledGallerySlider, StyledIconBox } from './GallerySlider.theme'

import { IGallerySlider } from './GallerySlider.interface'
import Icon from '@/components/atoms/Icon/Icon.component'
import Spacer from '@/components/atoms/Spacer'

interface IImagesStyles {
  imageElement: ReactNode
  width: string
  paddingRight: string | undefined
}

const GallerySlider = ({ imagesElements }: IGallerySlider) => {
  const [counter, setCounter] = useState(0)
  const [images, setImages] = useState<IImagesStyles[]>([])
  const [hasLeft, setHasLeft] = useState(false)
  const [hasRight, setHasRight] = useState(true)

  useEffect(() => {
    const finalImages: IImagesStyles[] = []
    imagesElements.map((image, index) => {
      finalImages.push({
        imageElement: image,
        width: getFinalWidth(index),
        paddingRight: getFinalVisible(index)
      })
    })
    setImages(finalImages)
  }, [counter])

  const onClickRight = () => {
    if (counter + 1 === images.length - 1) {
      setHasRight(false)
      return
    }
    if (counter + 1 < images.length) {
      setCounter(prev => prev + 1)
      setHasLeft(true)
    }

    if (counter + 3 === images.length) setHasRight(false)
  }

  const onClickBack = () => {
    setHasRight(true)
    if (counter - 1 === 0 || counter === 0) {
      setHasLeft(false)
    }
    if (counter - 1 >= 0) {
      setCounter(prev => prev - 1)
    }
  }

  function getFinalWidth(index: number) {
    if (index === counter) return '85%'
    if (index === counter + 1) return '15%'
    return '0%'
  }

  function getFinalVisible(index: number) {
    if (index === counter) return '1rem'
  }

  return (
    <StyledGallerySlider>
      <div className="images">
        {images &&
          images.map((imageElement, index) => (
            <div
              key={index}
              className="image"
              style={{
                width: imageElement && imageElement?.width,
                paddingRight: imageElement && imageElement?.paddingRight
              }}
            >
              {imageElement && imageElement?.imageElement}
            </div>
          ))}
      </div>
      <div className="controls">
        <StyledIconBox disabled={hasLeft}>
          <Icon
            icon="icon-arrow-back"
            onClick={onClickBack}
            style={{
              color: `${hasLeft ? 'white' : 'gray'}`
            }}
          />
        </StyledIconBox>
        <div className="bar"></div>
        <StyledIconBox disabled={hasRight}>
          <Icon icon="icon-arrow-forward" onClick={onClickRight} />
        </StyledIconBox>
      </div>
    </StyledGallerySlider>
  )
}

export default GallerySlider