import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'
import SlickCarousel, { CustomArrowProps, Settings } from 'react-slick'
import classnames from 'classnames'

import { LeftIcon, RightIcon } from '../icons'
import { ComponentSize, usePrefix } from '../ConfigProvider'
import { concat } from '../utils'
import { WithRef } from '../utils/type'

export type CarouselType = 'default' | 'primary' | 'secondary'

export interface CarouselProps {
  /**
   * 走马灯的大小
   * @default default
   */
  size?: Exclude<ComponentSize, 'large'>
  /**
   * 走马灯的类型
   * @default default
   */
  type?: CarouselType
  /**
   * 自动播放
   * @default false
   */
  autoplay?: boolean
  /**
   * 自动播放的间隔时间，单位为ms
   * @default 2000
   */
  autoplaySpeed?: number
  /**
   * slide 切换之前触发
   * @param currentSlide 当前 slide[number]
   * @param nextSlide 下一个 slide[number]
   */
  beforeChange?(currentSlide: number, nextSlide: number): void
  /**
   * slide 切换后触发
   * @param currentSlide 当前 slide[number]
   */
  afterChange?(currentSlide: number): void
  children?: ReactNode
  /**
   * 根元素的 html 属性
   */
  rootHtmlProps?: WithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
}

export default function Carousel(props: CarouselProps) {
  const { size = 'default', type = 'default', autoplay = false, autoplaySpeed = 2000,
    beforeChange, afterChange, children, rootHtmlProps
  } = props
  const prefix = usePrefix('carousel')
  const typePrefix = concat(prefix, type)
  const sizePrefix = concat(typePrefix, size)
  const className = classnames(prefix, typePrefix, sizePrefix, rootHtmlProps?.className)
  const dotsClass = classnames('slick-dots slick-dots-bottom', typePrefix, sizePrefix)
  const newProps: Settings = {
    arrows: false,
    autoplay,
    autoplaySpeed,
    cssEase: 'linear',
    infinite: true,
    speed: 300,
    draggable: false, // 禁止鼠标拖动
    dotsClass,
    beforeChange,
    afterChange,
    nextArrow: <SlickArrow className={sizePrefix}><RightIcon /></SlickArrow>,
    prevArrow: <SlickArrow className={sizePrefix}><LeftIcon /></SlickArrow>
  }
  if (type === 'secondary') {
    newProps.arrows = true
  }

  return (
    <div {...rootHtmlProps} className={className}>
      <SlickCarousel arrows={false} dots {...newProps}>
        {children}
      </SlickCarousel>
    </div>
  )
}

// 去掉多余的属性，不然控制台有 warning
function SlickArrow({ currentSlide, slideCount, children, style, ...props }: PropsWithChildren<CustomArrowProps>) {
  const centerStyle: CSSProperties = { display: 'flex', alignItems: 'center', justifyContent: 'center' }
  return <div style={{ ...style, ...centerStyle }} {...props}>{children}</div>
}