import { Component } from '@tarojs/taro';
import { ComponentClass } from 'react';
import { View } from '@tarojs/components';

import './Modal.scss';

type PageOwnProps = {
  children?: JSX.Element | JSX.Element[] | string;
  visiabled: boolean;
  title: string;
  onCancel: () => void;
  onSubmit: () => void;
};
type PageState = {};

interface Modal {
  props: PageOwnProps;
  state: PageState;
}

class Modal extends Component {
  static externalClasses = ['body-class'];
  static options = {
    addGlobalClass: true,
  };
  static defaultProps = {
    visiabled: false,
    title: '提示',
  };
  cancelHandle() {
    const { onCancel } = this.props;
    onCancel && onCancel();
  }
  submitHandle() {
    const { onSubmit } = this.props;
    onSubmit && onSubmit();
  }

  render() {
    const { visiabled, title } = this.props;
    return visiabled ? (
      <View className='Modal'>
        <View className='mask' />
        <View className='Modal-Dialog'>
          <View className='Modal-title'>{title}</View>
          <View className='Modal-body body-class'>{this.props.children}</View>
          <View className='Modal-footer'>
            <View
              className='Modal-footerItem cancel'
              onClick={this.cancelHandle}>
              取消
            </View>
            <View
              className='Modal-footerItem confirm'
              onClick={this.submitHandle}>
              确定
            </View>
          </View>
        </View>
      </View>
    ) : null;
  }
}

export default Modal as ComponentClass<PageOwnProps, PageState>;