import { h, Component } from 'preact';

import styles from './css/index.less';


class PopupContainer extends Component <{
  subtitle?: string;
  title?: string;
  size: string;
  cancelText?: string;
  confirmText?: string;
  onClickClose?: () => void;
  onClickCancel?: () => void;
  onClickConfirm?: () => void;
}, any> {
  render() {
    const { children, title, size, onClickClose, subtitle, cancelText, confirmText, onClickConfirm, onClickCancel  } = this.props;
    return (
      <div className={styles['popup-container']}>
        <div className={styles['popup-mask']} />
        <div className={`${styles['popup-content']} ${styles[size]}`}>
          <div className={styles['popup-header']}>
            <div className={styles['popup-title']}>
              {title}
            </div>
            <div className={styles['popup-subtitle']}>
              {subtitle ? <div>{subtitle}</div> : <div></div>}
            </div>
            <div
              className={styles['popup-close']}
              onClick={onClickClose}
            />
          </div>
          {children}
          {(cancelText || confirmText)
            && (
            <div className={styles['popup-btn-group']}>
              {
                cancelText
                && (
                <div
                  className={styles['popup-btn-cancel']}
                  onClick={onClickCancel}
                >
                  <text className={styles['btn-text']}>
                    {cancelText}
                  </text>
                </div>
                )
              }
              {
                confirmText
                && (
                <div
                  className={styles['popup-btn-confirm']}
                  onClick={onClickConfirm}
                >
                  <text className={styles['btn-text']}>
                    {confirmText}
                  </text>
                </div>
                )
              }
            </div>
            )}
        </div>
      </div>
    );
  }
}

export default PopupContainer;