import Taro from '@tarojs/taro'
import { CoverView } from '@tarojs/components'

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

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

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

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

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

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

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

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