import { h, Component } from 'preact';

import LongPressWrap from '../long-press/long-press';
import PMGButton from '../pmg-button/pmg-button';

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

class PMGPopupContainer extends Component <{
  title?: string;
  size: 'small' | 'normal' | 'large' | 'full' | 'full-center';
  isHideClose?: boolean;
  titleColor?: string;
  subtitle?: string;
  cancelText?: string;
  confirmText?: string;
  smallText?: string;
  isChecked?: boolean;
  checkText?: string;
  btnGroupStyle?: object;
  popupContentStyle?: object;
  slotStyle?: object;
  onClickClose?: () => void;
  onClickCancel?: () => void;
  onClickConfirm?: () => void;
  onClickCheck?: () => void;
  onLongPress?: () => void;
}, any> {
  render() {
    // onClickClose 关闭弹窗
    // children 内容
    // title 标题
    // size 弹窗大小
    // isHideClose 是否隐藏关闭按钮
    // titleColor 标题颜色
    // subtitle 副标题
    // cancelText 取消按钮文案
    // confirmText 确认按钮文案
    // onClickCancel 取消按钮点击事件
    // onClickConfirm 确认按钮点击事件
    // isChecked 是否选中
    // smallText 小按钮文案
    // checkText check按钮文案
    // btnGroupStyle 按钮组样式 object
    // popupContentStyle 弹窗内容样式 object
    // slotStyle 槽位样式 object
    const { children, title, size, onLongPress, isHideClose, titleColor, subtitle, cancelText, confirmText, onClickClose, onClickConfirm, onClickCancel, onClickCheck, smallText, isChecked, checkText, popupContentStyle, btnGroupStyle, slotStyle } = this.props;

    let dialogContentClassName = `${styles['pmg-dialog-content']}`;
    if ((cancelText || confirmText) && !subtitle) {
      dialogContentClassName = `${styles['pmg-dialog-content']} ${styles['pmg-dialog-content-small']}`;
    } else if ((cancelText || confirmText) && subtitle) {
      dialogContentClassName = `${styles['pmg-dialog-content']} ${styles['pmg-dialog-content-mini']}`;
    }

    return (
      <div className={styles['pmg-popup-container']}>
        <div className={styles['pmg-popup-mask']} />
        <div
          className={`${styles['pmg-popup-content']} ${styles[`pmg-${size}`]}`}
          style={popupContentStyle}
        >
          <div className={styles['pmg-popup-header']}>
            {/* 标题 */}
            <div
              className={styles['pmg-popup-title']}
            >
              <text
                style={{ color: titleColor }}
                className={styles['pmg-popup-title-text']}
              >
                {title}
              </text>
            </div>
            {
              !isHideClose && (
              <div
                className={styles['pmg-popup-close']}
                onClick={onClickClose}
              />
              )
            }
          </div>
          {/* 副标题 */}
          {
            subtitle && (
            <div className={styles['pmg-popup-subtitle']}>
              {subtitle}
            </div>
            )
          }
          {/* 消息弹窗内容 */}
          {smallText && size === 'small' && (
          <div className={dialogContentClassName}>
            <LongPressWrap
              customClass={styles['pmg-dialog-text-wrapper']}
              onLongPress={onLongPress}
            >
              <text className={styles['pmg-dialog-text']}>
                {smallText}
              </text>
            </LongPressWrap>
          </div>
          )}
          <div
            className={styles['pmg-popup-children']}
            style={slotStyle}
          >
            {children}
          </div>
          {/* 按钮 */}
          {(cancelText || confirmText)
            && (
            <div
              className={styles['pmg-popup-btn-group']}
              style={btnGroupStyle}
            >
              {/* 底部接受系统调配 */}
              {
                checkText
              && (
              <div
                className={styles['pmg-btn-system-auto']}
                onClick={onClickCheck}
              >
                <div className={isChecked ? `${styles['pmg-btn-auto-icon']} ${styles['pmg-active']} ` : styles['pmg-btn-auto-icon']}></div>
                <text className={styles['pmg-btn-auto-text']}>{checkText}</text>
              </div>
              )
              }
              {
                cancelText
                && (
                  <div className={styles['pmg-btn-cancel']}>
                    <PMGButton
                      type="secondary"
                      size="medium"
                      text={cancelText}
                      onClick={onClickCancel}
                    />
                  </div>
                )
              }
              {
                confirmText
                && (
                <PMGButton
                  type="primary"
                  size="medium"
                  text={confirmText}
                  onClick={onClickConfirm}
                />
                )
              }
            </div>
            )}
        </div>
      </div>
    );
  }
}

export default PMGPopupContainer;