import { View } from '@tarojs/components'

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CtsModalProps } from 'types/modal'

/**
 * 模态框组件
 */
export default class CtsModal extends CtsComponent<CtsModalProps> {
  // static options = {
  //   addGlobalClass: true
  // }

  public static defaultProps: CtsModalProps
  public static propTypes: InferProps<CtsModalProps>

  public constructor(props: CtsModalProps) { 
    super(props)
    this.state = {}
  }

  public render(): JSX.Element {
    let { className, isOpened, title, content, isCancel, isConfirm, cancelText, confirmText, onClose, onCancel, onConfirm } = this.props

    return isOpened ? (
      <View className={classNames('cts-modal', className)}>
        <View className='cts-modal-cover' onClick={onClose}></View>
        <View className='cts-modal-home'>
          <View className='cts-modal-title'>{title}</View>
          <View className='cts-modal-content'>
            {
              content &&
              <View className='content-text'>{content}</View>
            }
            {this.props.children}
          </View>
          <View className='cts-modal-footer'>
            {
              (isCancel && cancelText) && <View className='btn-return' onClick={onCancel}>{cancelText}</View>
            }
            {
              isConfirm && <View className={classNames('btn-submit', { 'btn-cancel': !isCancel })} onClick={onConfirm}>{confirmText}</View>
            }
          </View>
        </View>
      </View>
    )
      :
      null
  }
}

CtsModal.defaultProps = {
  title: '',
  isOpened: false,
  content: '',
  isCancel: true,
  isConfirm: true,
  cancelText: '取消',
  confirmText: '确定',
  onClose() { },
  onCancel() { },
  onConfirm() { }
}

CtsModal.propTypes = {
  title: PropTypes.string,
  isOpened: PropTypes.bool,
  content: PropTypes.string,
  isCancel: PropTypes.bool,
  isConfirm: PropTypes.bool,
  cancelText: PropTypes.string,
  confirmText: PropTypes.string,
  onClose: PropTypes.func,
  onCancel: PropTypes.func,
  onConfirm: PropTypes.func,
}