import { useContext } from "react";
import {
  ActivityIndicator,
  Text,
  TouchableHighlight,
  TouchableOpacity,
  View,
} from "react-native";
import { AppContext, AppStyles, Constants } from "../../utils";
import MyIcon from "../Icon";
import { LinearGradient } from "expo-linear-gradient";

export default function MyButton({
  title,
  style,
  disabled,
  onPress,
  buttonLeftComponent,
  buttonGradientColor,
}) {
  const appContext = useContext(AppContext);

  /*const bBackgroundColor =
    buttonBackgroundColor === undefined
      ? appContext.appTheme.colors.primary
      : buttonBackgroundColor; */

  const bGradientColor =
    buttonGradientColor === undefined
      ? Constants.gradients.orange
      : buttonGradientColor;

  return (
    <TouchableHighlight
      disabled={disabled}
      onPress={onPress}
      style={[{ borderRadius: 6 }, style]}
    >
      <LinearGradient
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        colors={bGradientColor}
        style={[
          {
            //backgroundColor: bBackgroundColor,
            borderRadius: 6,
            padding: 10,
          },
          //AppStyles.Shadow,
          disabled && { opacity: 0.6 },
          buttonLeftComponent && {
            flexDirection: "row",
            alignItems: "center",
          },
        ]}
      >
        {buttonLeftComponent}
        <Text
          style={{
            textAlign: "center",
            color: appContext.appTheme.buttonTextColor,
          }}
        >
          {title}
        </Text>
      </LinearGradient>
    </TouchableHighlight>
  );
}

export function MyTextButton({
  title,
  styleContainer,
  style,
  onPress,
  actionColor,
  iconName,
  disabled,
  textSelectable,
}) {
  const appContext = useContext(AppContext);

  const color = disabled
    ? appContext.appTheme.textDisabled
    : actionColor
    ? appContext.appTheme.colors.primary
    : appContext.appTheme.textSecondary;

  return (
    <View style={styleContainer}>
      <TouchableOpacity onPress={onPress} disabled={disabled}>
        <View
          style={[
            {
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
            },
            style,
          ]}
        >
          <MyIcon
            name={iconName}
            size={24}
            style={{
              marginRight: 10,
              color: color,
            }}
          />
          <Text
            selectable={textSelectable}
            style={[{ color: color }, AppStyles.typography16]}
          >
            {title}
          </Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}

export function MyIconButton({
  style,
  onPress,
  iconName,
  iconSize,
  iconColor,
  usePrimaryColor,
  disabled,
  activeOpacity,
}) {
  const appContext = useContext(AppContext);

  const color =
    usePrimaryColor !== undefined
      ? appContext.appTheme.colors.primary
      : iconColor === undefined
      ? appContext.appTheme.icon
      : iconColor;

  return (
    <TouchableOpacity
      onPress={onPress}
      disabled={disabled}
      style={style}
      activeOpacity={activeOpacity !== undefined ? activeOpacity : 0.2}
    >
      <MyIcon
        name={iconName}
        size={iconSize}
        color={color}
        style={[disabled && AppStyles.disabled]}
      />
    </TouchableOpacity>
  );
}
