import { Image, View } from '@tarojs/components'
import classnames from 'classnames'
import { useEffect, useState } from 'react'
import style from './index.module.scss'
import { usePropsValue } from '@/use/useCommon'

interface PropsType {
  showOverLay?: boolean
  show: boolean
  onClose?: (show: boolean) => void
  onChange?: (isShow) => void
  children?: React.ReactNode
}
// 弹出框
const Dialog = (props: PropsType) => {
  const { showOverLay = true, show = false, onClose: _onClose, onChange: _onChange, children } = props

  const [_show, setShow] = usePropsValue({
    value: show,
    defaultValue: false,
    onChange: (value) => {
      _onChange?.(value)
    },
  })

  const [animShow, setAnimShow] = useState(false)

  const handleAnimShow = () => {
    setShow(true)
    setTimeout(() => {
      setAnimShow(true)
    }, 200)
  }
  const handleAnimHide = () => {
    setAnimShow(false)
    setTimeout(() => {
      setShow(false)
    }, 200)
  }
  const onClose = () => {
    handleAnimHide()
    _onClose?.(_show)
  }
  useEffect(() => {
    if (show) {
      handleAnimShow()
    }
  }, [show])
  return _show
    ? <View className={style.dialog}>
      {/* 遮罩层 start */}
      <View
        className={classnames(style.dialog_mask, { [style.dialog_mask_active]: animShow, [style['drawer_mask--hidden']]: !showOverLay })}
        onClick={onClose}
      ></View>
      {/* 遮罩层 end */}
      <View className={classnames(style.dialog_content, { [style.dialog_content_active]: animShow })}>
        {children}
      </View>
    </View>
    : <View></View>
}
export default Dialog