import React, { useEffect, useRef } from 'react'
import { Icon, Checkbox } from 'antd'
import { IFComponent } from '../common'
import { debounce } from 'lodash'

const presetColors = [
  {
    from: '#807dfd',
    to: '#5590ea'
  },
  {
    from: '#16e0c8',
    to: '#1abfbb'
  },
  {
    from: '#ffc2ac',
    to: '#f7774a'
  },
  {
    from: '#73cafa',
    to: '#6e9ade'
  }
]

const GradientCard = function (props) {
  let {
    title,
    children,
    checkable,
    checked,
    onCheckedChange,
    colors,
    colorIndex = 0,
    style,
    className,
    titleClassName,
    contentClassName
  } = props

  let gradientColors = []
  if (Array.isArray(colors) && colors.length) {
    gradientColors = colors
  } else {
    if (colorIndex !== undefined) {
      colorIndex > 3 && (colorIndex = 3)
      gradientColors = [presetColors[colorIndex].from, presetColors[colorIndex].to]
    } else {
      const randomIndex = Math.floor(Math.random() * 4)
      gradientColors = [presetColors[randomIndex].from, presetColors[randomIndex].to]
    }
  }

  return (
    <div
      className={`opt-layout-card__gradient ${className || ''}`}
      style={{
        background: `linear-gradient(102deg, ${gradientColors[0]} 0%, ${gradientColors[1]} 100%)`,
        ...style
      }}>
      <IFComponent IF={!!title}>
        <div
          title={typeof title === 'string' ? title : ''}
          className={`opt-layout-card__gradient--title ${titleClassName || ''}`}
        >
          <IFComponent IF={!!checkable}>
            <Checkbox
              defaultChecked={checked}
              onChange={val => onCheckedChange instanceof Function && onCheckedChange(val.target.checked)}
            />
          </IFComponent>
          <span>{title}</span>
        </div>
      </IFComponent>
      <div className={`opt-layout-card__gradient--content ${contentClassName || ''}`}>
        {children}
      </div>
    </div>
  )
}

const DashboardCard = function (props) {
  let {
    title,
    attach,
    iconType,
    children,
    colors,
    colorIndex = 0,
    style,
    className,
    titleClassName,
    contentClassName
  } = props

  let gradientColors = []
  if (Array.isArray(colors) && colors.length) {
    gradientColors = colors
  } else {
    if (colorIndex !== undefined) {
      colorIndex > 3 && (colorIndex = 3)
      gradientColors = [presetColors[colorIndex].from, presetColors[colorIndex].to]
    } else {
      const randomIndex = Math.floor(Math.random() * 4)
      gradientColors = [presetColors[randomIndex].from, presetColors[randomIndex].to]
    }
  }

  return (
    <div
      className={`opt-layout-card__dashboard ${className || ''}`}
      style={{
        background: `linear-gradient(102deg, ${gradientColors[0]} 0%, ${gradientColors[1]} 100%)`,
        ...style
      }}>
      <IFComponent IF={!!title}>
        <div className={`opt-layout-card__dashboard--title ${titleClassName || ''}`}>
          <span>{title}</span>
          <span>{attach}</span>
        </div>
      </IFComponent>
      <div className={`opt-layout-card__dashboard--content ${contentClassName || ''}`}>
        <div className='opt-layout-card__dashboard--font'>{children}</div>
        <div className='opt-layout-card__dashboard--icon'><Icon type={iconType} /></div>
      </div>
    </div>
  )
}

const LayoutCard = function (props) {
  const measuredRef = useRef(null)
  useEffect(() => {
    const onWinResize = debounce(function () {
      const { clientWidth, clientHeight } = measuredRef.current
      props.onSize instanceof Function && props.onSize({
        width: clientWidth,
        height: clientHeight,
        contentWidth: clientWidth - 32,
        contentHeight: clientHeight - 48
      })
    }, 500)
    onWinResize()
    window.addEventListener('resize', onWinResize)
    return () => {
      window.removeEventListener('resize', onWinResize)
    }
  }, [measuredRef.current])

  const { id, title, checkable, checked, onCheckedChange, children, style, className, titleClassName } = props
  return (
    <div id={id} ref={measuredRef} className={`opt-layout-card ${className || ''}`} style={style}>
      <IFComponent IF={!!title}>
        <div
          title={typeof title === 'string' ? title : ''}
          className={`opt-layout-card__title ${titleClassName || ''}`}
        >
          <IFComponent IF={!!checkable}>
            <Checkbox
              defaultChecked={checked}
              onChange={val => onCheckedChange instanceof Function && onCheckedChange(val.target.checked)}
            />
          </IFComponent>
          <span>{title}</span>
        </div>
      </IFComponent>
      {children}
    </div>
  )
}

LayoutCard.GradientCard = GradientCard
LayoutCard.DashboardCard = DashboardCard

export default LayoutCard
