import React from 'react';
import { View, Image, ITouchEvent } from '@tarojs/components';
import classNames from 'classnames';

interface ButtonProps {
  /** 类型 */
  type?:
    | 'primary' // 主色
    | 'primary-line' // 主色描边
    | 'gold' // 金色
    | 'light' // 亮色
    | 'grey' // 灰色
    | 'grey-line' // 灰色描边
    | 'white' // 白色
    | 'white-line'; // 白色描边
  /** 尺寸 */
  size?:
    | 'long' // 宽度拉长
    | 'large' // 大尺寸
    | 'middle' // 中尺寸
    | 'small' // 小尺寸
    | 'mini'; // 迷你尺寸
  /** 禁用状态 */
  disabled?: boolean;
  /** 图标 */
  icon?: string;
  /** 点击回调 */
  onClick?: (event: ITouchEvent) => void;
}

/**
 * 按钮组件
 */
const Button: React.FC<ButtonProps> = ({
  type = 'primary',
  size = 'long',
  disabled = false,
  icon = '',
  onClick = () => {},
  children,
}) => {
  let disabledMap = {
    primary: 'disable-0',
    'primary-line': 'disable-1',
    gold: 'disable-0',
    light: 'disable-2',
    grey: 'disable-2',
    'grey-line': 'disable-3',
    white: 'disable-4',
    'white-line': 'disable-4',
  };

  const classObject = classNames(
    'wm-button',
    `wm-button-${type}`,
    `wm-button-${size}`,
    disabled && `wm-button-${disabledMap[type]}`,
  );

  return (
    <View className={classObject} onClick={onClick}>
      {icon !== '' && <Image className='icon' src={icon} />}
      <View className='text'>{children}</View>
    </View>
  );
};

export default Button;