import React from 'react';
import { View, Image, ScrollView, ITouchEvent } from '@tarojs/components';
import classNames from 'classnames';
const iconClose = 'https://wanmi-b2b-x-site.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/components/images/icon-close.png';

interface PopupLayerProps {
  /** 弹框位置 */
  position?:
    | 'bottom' // 底部
    | 'right' // 右侧
    | 'left'; // 左侧
  /** 标题 */
  title?: string;
  /** 是否滚动 */
  scroll?: boolean;
  /** 是否可见 */
  visible?: boolean;
  /** 关闭事件 */
  onClose?: (event: ITouchEvent) => void;
}

/**
 * 弹层组件
 */
const PopupLayer: React.FC<PopupLayerProps> = ({
  position = 'bottom',
  title = '',
  scroll = false,
  visible = false,
  onClose = () => {},
  children,
}) => {
  const classObject = classNames(
    'wm-popup-layer',
    `wm-popup-layer-${position}`,
    { 'wm-popup-layer-active': visible },
  );

  return (
    <View
      onTouchMove={(e) => {
        e.stopPropagation();
      }}
      className={classObject}>
      <View onClick={onClose} className='mask' />
      <View className='body'>
        {title !== '' && (
          <View className='header'>
            <View className='title'>{title}</View>
          </View>
        )}
        <View onClick={onClose} className='close'>
          <Image className='close-img' src={iconClose} />
        </View>
        {scroll ? (
          <ScrollView
            className='content'
            scrollY
            scrollWithAnimation
            scrollTop={20}
            lowerThreshold={0}
            upperThreshold={0}>
            {children}
          </ScrollView>
        ) : (
          <View className='content'>{children}</View>
        )}
      </View>
    </View>
  );
};

export default PopupLayer;