import React, { useEffect, useState } from 'react';
import { View, Text } from '@tarojs/components';
import classNames from 'classnames';
import Taro from '@tarojs/taro';
import PasswordModal from './components/password-modal';
import EmailModal from './components/email-modal';
import TipModal from './components/tip-modal';
import WarningModal from './components/warning-modal';

interface ModalProps {
  /** 类型 */
  type?:
    | 'default' // 默认类
    | 'warning' // 警告类
    | 'tip' //告知类
    | 'password' //密码类
    | 'email'; //邮箱类
  /** 标题 */
  title?: string;
  /** 内容 */
  content?: string;
  /**对话框是否可见	 */
  visible: boolean;
  /**密码错误提示 */
  errorText?: string;
  /** 初始值 */
  placeholder?: string;
  /** 确认按钮的文本 */
  confirmText?: string;
  /** 取消按钮的文本 */
  cancelText?: string;
  /** 是否显示取消按钮 */
  showCancel?: boolean;
  /** 提示图标 */
  icon: string;
  /** 取消事件 */
  onCancel: () => void;
  /** 确定事件 */
  onOk?: (value?: string) => void;
  /** 忘记密码 */
  onForget?: () => void;
}

/**
 * 弹窗组件
 */
const Modal: React.FC<ModalProps> = ({
  type = 'default',
  title,
  content = '',
  visible = false,
  errorText = '',
  placeholder = '',
  confirmText = '确定',
  cancelText = '取消',
  showCancel = true,
  icon,
  onCancel = () => {},
  onOk = (_value) => {},
  onForget = () => {},
}) => {
  const classObject = classNames('wm-modal', `wm-modal-${type}`, {
    'wm-modal-active': visible,
  });
  const [bodyHeight, setBodyHeight] = useState(0);
  const [emailValue, setEmail] = useState(content);
  /* eslint-disable */
  useEffect(() => {
    //获取动态内容高度
    Taro.createSelectorQuery()
      .select('.body')
      .boundingClientRect((res) => {
        if (res) setBodyHeight(res.height);
      })
      .exec();

    process.env.TARO_ENV === 'weapp' &&
      Taro.onKeyboardHeightChange((res) => {
        setBodyHeight(res.height + bodyHeight);
      });
  }, []);
  /* eslint-enable */

  return (
    <View className={classObject}>
      <View
        className='mask'
        onClick={() => {
          onCancel();
          setEmail('');
        }}></View>
      {type === 'default' && (
        <View className='body'>
          {title && (
            <View className='header'>
              <View className='title'>{title}</View>
            </View>
          )}
          <View className='content'>{content}</View>
          <View className='footer'>
            <Text className='cancel' onClick={() => onCancel()}>
              {cancelText}
            </Text>
            <Text className='confirm' onClick={() => onOk()}>
              {confirmText}
            </Text>
          </View>
        </View>
      )}
      {type === 'warning' && (
        <WarningModal
          title={title}
          content={content}
          errorText={errorText}
          onOk={() => onOk()}
          onCancel={() => onCancel()}
          confirmText={confirmText}
          cancelText={cancelText}
          showCancel={showCancel}
          icon={icon}
        />
      )}
      {type === 'tip' && (
        <TipModal
          title={title}
          content={content}
          confirmText={confirmText}
          onOk={() => onOk()}
        />
      )}
      {type === 'password' && (
        <PasswordModal
          bodyHeight={bodyHeight}
          title={title}
          errorText={errorText}
          onCancel={onCancel}
          onOk={(value) => onOk(value)}
          onForget={onForget}
        />
      )}
      {type === 'email' && (
        <EmailModal
          bodyHeight={bodyHeight}
          title={title}
          value={emailValue}
          errorText={errorText}
          placeholder={placeholder}
          setEmail={(value: string) => setEmail(value)}
          onCancel={() => onCancel()}
          onOk={() => onOk(emailValue)}
        />
      )}
    </View>
  );
};

export default Modal;