import { useContext } from "react";
import { Text, TouchableHighlight, TouchableOpacity, View } from "react-native";
import { AppContext, AppStyles } from "../../utils";
import MyIcon from "../Icon";

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

  return (
    <TouchableHighlight
      disabled={disabled}
      onPress={onPress}
      style={[{ borderRadius: 6 }, style]}
    >
      <View
        style={[
          {
            backgroundColor: appContext.appTheme.colors.primary,
            borderRadius: 6,
            padding: 10,
          },
          AppStyles.Shadow,
          disabled && { opacity: 0.6 },
        ]}
      >
        <Text style={{ textAlign: "center", color: appContext.appTheme.text }}>
          {title}
        </Text>
      </View>
    </TouchableHighlight>
  );
}

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

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

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

export function MyIconButton({
  style,
  onPress,
  iconName,
  iconSize,
  iconColor,
  usePrimaryColor,
  disabled,
}) {
  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}>
      <MyIcon
        name={iconName}
        size={iconSize}
        color={color}
        style={disabled && AppStyles.disabled}
      />
    </TouchableOpacity>
  );
}
