import React from 'react';
import {
  Image,
  ImageSourcePropType,
  ImageStyle,
  StyleProp,
  StyleSheet,
  Text,
  TextStyle,
  TouchableOpacity,
  ViewStyle,
} from 'react-native';
import {THEME_COLOR, THEME_COLOR_DISABLED} from '@common/constants';

const THEME_COLOR_LIGHT = '#FFFFFF';
const BACK_COLOR_LIGHT = 'rgba(0 , 0, 0, 0)';

type Props = {
  title: string; // 按钮文字
  disabled?: boolean; // 是否禁用
  icon?: ImageSourcePropType; // 图标
  theme: 'light' | 'dark'; // 按钮主题，默认深色
  onPress?: () => void; // 点击按钮回调
  style?: StyleProp<ViewStyle>; // 样式
  textStyle?: StyleProp<TextStyle>; // 文字样式
  iconStyle?: StyleProp<ImageStyle>; // 图标样式
};

/**
 * @description: 项目中常见的用于提交的按钮，长条圆角，主题色。
 */
export default function SubmitButton(props: Props) {
  return (
    <TouchableOpacity
      disabled={props.disabled}
      style={[
        styles.container,
        {
          borderColor:
            props.disabled === true && props.theme === 'dark'
              ? BACK_COLOR_LIGHT
              : THEME_COLOR,
          backgroundColor:
            props.theme === 'light'
              ? BACK_COLOR_LIGHT
              : props.disabled
              ? THEME_COLOR_DISABLED
              : THEME_COLOR,
        },
        props.style,
      ]}
      onPress={() => {
        props.onPress && props.onPress();
      }}>
      {props.icon && (
        <Image
          style={[
            styles.icon,
            {
              tintColor:
                props.theme === 'light'
                  ? THEME_COLOR_LIGHT
                  : props.disabled
                  ? THEME_COLOR_DISABLED
                  : THEME_COLOR,
            },
            props.iconStyle,
          ]}
          resizeMode="contain"
          source={props.icon}
        />
      )}
      <Text
        style={[
          styles.text,
          {
            color:
              props.theme === 'dark'
                ? THEME_COLOR_LIGHT
                : props.disabled
                ? THEME_COLOR_DISABLED
                : THEME_COLOR,
          },
          props.textStyle,
        ]}
        numberOfLines={1}>
        {props.title}
      </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderRadius: 50,
    paddingVertical: 13,
    paddingHorizontal: 8,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
  },
  text: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  icon: {
    width: 17,
    height: 17,
    marginRight: 5,
  },
});
