import React, { useEffect } from 'react'

import Button from '@/components/atoms/Button/Button.component'
import { ISlider } from './Slider.interface'
import Icon from '@/components/atoms/Icon/Icon.component'
import { StyledSlider } from './Slider.theme'
import { useBlazeSlider } from './Slider.utils'
import Separator from '@/components/atoms/Separator'
import { variables } from '@/index'

const Slider = ({
  arrows,
  dots = false,
  slidesToShow,
  slidesToScroll,
  infinite,
  autoplay,
  spacing,
  mediaQueries,
  className,
  style,
  children,
  onSlide,
  ...props
}: ISlider) => {
  let responsive: any = []
  let responsiveCSS: string = ''
  let elRef: any = null
  let sliderRef: any = null

  const setConfig = () => {
    if (sliderRef?.current) sliderRef.current.destroy()
    responsiveCSS = `
      --slides-to-show: ${slidesToShow ? slidesToShow : 4};
      --slide-gap: ${spacing ? spacing : '1rem'};
    `

    if (mediaQueries) {
      const responsiveKeys = Object.keys(mediaQueries).reverse()
      const responsiveValues = Object.values(mediaQueries).reverse()

      mediaQueries &&
        responsiveKeys.map((value: string, index: number) => {
          responsive[`(max-width: ${value}px)`] = {
            slidesToShow: responsiveValues[index].slidesToShow
          }
          responsiveCSS += `@media screen and (max-width:${value}px){
            --slides-to-show: ${responsiveValues[index].slidesToShow} !important;
          }`
        })
    }

    const refs = useBlazeSlider({
      all: {
        // layout
        slidesToShow: slidesToShow ? slidesToShow : 4,
        slidesToScroll: slidesToScroll ? slidesToScroll : 1,
        slideGap: spacing ? spacing : '1rem',

        // loop
        loop: infinite,

        // autoplay
        enableAutoplay: autoplay ? autoplay : false,
        stopAutoplayOnInteraction: false,
        autoplayInterval: 3000,
        autoplayDirection: 'to left',

        // pagination
        enablePagination: dots,

        // transition
        transitionDuration: 500,
        transitionTimingFunction: 'ease'
      },
      ...responsive,
      onSlide: (
        pageIndex: number,
        firstVisibleSlideIndex: number,
        lastVisibleSlideIndex: number
      ) => {
        if (onSlide) onSlide
      }
    })

    elRef = refs.elRef
    sliderRef = refs.sliderRef
  }

  // useEffect(() => {
  //   if (sliderRef && sliderRef.current) {
  //     console.log(sliderRef?.current)
  //     sliderRef.current.destroy()
  //     setConfig()
  //   }
  // }, [
  //   arrows,
  //   dots,
  //   slidesToShow,
  //   slidesToScroll,
  //   infinite,
  //   spacing,
  //   mediaQueries
  // ])

  setConfig()

  return (
    <StyledSlider
      $responsiveCSS={responsiveCSS}
      className={className}
      style={style}

    >
      <div className="blaze-slider" ref={elRef}>
        <div className="blaze-container">
          <div className="blaze-track-container">
            <div className="blaze-track">{children}</div>
          </div>
        </div>

        {React.Children.count(children) > 1 && (
          <div className="blaze-controls">

            <div className="blaze-arrows">
              {arrows && (
                <>
                  <Button
                    theme={'light'}
                    size={'small'}
                    variant="link"
                    leftIcon={<Icon icon="icon-arrow-back" />}
                    className="blaze-prev m-0"
                  />
                  <Separator
                    color={variables.colors.white}
                    height={'1px'}
                  ></Separator>
                </>
              )}
              {dots && <div className="blaze-pagination"></div>}
              {arrows && (
                <Button
                  variant="link"
                  theme={'light'}
                  size={'small'}
                  leftIcon={<Icon icon="icon-arrow-forward" />}
                  className="blaze-next"
                />

              )}
            </div>
          </div>
        )}
      </div>
    </StyledSlider>
  )
}

export default Slider