import {View} from '@tarojs/components'
import style from './index.module.less'
interface Props {
  show?: boolean
  children: React.ReactChild | React.ReactChild[]
  footer?: boolean
  showCancelButton?: boolean
  confirmText?: string
  cancelText?: string
  onCancel?: () => void
  onConfirm?: () => void
}
const index = ({show = false, children, confirmText, cancelText, onConfirm, onCancel, showCancelButton=true, footer = true}: Props) => {

  const handleConfirm = () => {
    onConfirm && onConfirm()
  }
  const handleCancel = () => {
    onCancel && onCancel()
  }
  const renderFooter = () => {
    return <>
      <View className={style.footer}>
        {showCancelButton && <View className={style.footerButton} onClick={handleCancel}>{cancelText || '取消'}</View>}
        <View className={`${style.footerButtonPrimary}`} onClick={handleConfirm}>{confirmText || '确定'}</View>
      </View>
    </>
  }

  const renderModal = ()=> {
    if(show){
      return (<View className={style.container}>
        <View className={style.modalContent}>
          <View className={style.content}>
            {children}
          </View>
          {footer && renderFooter()}
        </View>
      </View>
      )
    }
  }
  return <>
    {renderModal()}
  </>
}
export default index
