import { useTheme, ThemeType } from "../../theme";
import React from "react";
import {
  View,
  TouchableOpacity,
  StyleSheet,
  StyleProp,
  ViewStyle,
  ImageSourcePropType,
  Text,
  TextStyle,
} from "react-native";
import { Image, ImageStyle} from 'expo-image';

interface BrandIconProps {
  brandLogo: ImageSourcePropType;
  brandName: string;
  size?: number;
  selected?: boolean;
  showName?: boolean;
  onPress?: () => void;
  disabled?: boolean;
  // styles for the circular button
  containerStyle?: StyleProp<ViewStyle>;
  // styles for the outer wrapper (align center + name)
  wrapperStyle?: StyleProp<ViewStyle>;
  nameStyle?: TextStyle;
  imageStyle?: StyleProp<ImageStyle>;
  selectionIndicatorStyle?: StyleProp<ViewStyle>;
  selectionIndicatorIcon?: React.ReactNode;
}

const BrandIcon: React.FC<BrandIconProps> = ({
  brandLogo,
  brandName,
  size = 66,
  selected = false,
  showName = false,
  onPress,
  disabled = false,
  containerStyle,
  wrapperStyle,
  imageStyle,
  selectionIndicatorStyle,
  selectionIndicatorIcon,
  nameStyle,
}) => {
  const { theme } = useTheme();
  const styles = createStyles(theme);

  // fixed circle dimensions
  const iconSize = {
    width: size,
    height: size,
    borderRadius: size / 2,
  };

  // size for the check indicator
  const indicatorSize = {
    width: size * 0.3,
    height: size * 0.3,
    borderRadius: (size * 0.3) / 2,
  };

  const indicatorPosition = {
    top: -5,
    right: 0,
  };

  return (
    <View style={[styles.wrapper, wrapperStyle]}>
      <TouchableOpacity
        style={[
          styles.container,
          iconSize,
          selected && styles.selectedContainer,
          containerStyle,
        ]}
        onPress={onPress}
        disabled={disabled || !onPress}
        activeOpacity={0.8}
      >
        <Image
          source={brandLogo}
          style={[
            { width: size, height: size, borderRadius: size / 2 },
            imageStyle,
          ]}
          contentFit="contain"
        />

        {selected && (
          <View
            style={[
              styles.selectionIndicator,
              indicatorSize,
              indicatorPosition,
              selectionIndicatorStyle,
            ]}
          >
            {selectionIndicatorIcon}
          </View>
        )}
      </TouchableOpacity>

      {showName && (
        <Text style={[styles.name, { width: iconSize.width }, nameStyle]}>
          {brandName}
        </Text>
      )}
    </View>
  );
};

const createStyles = (theme: ThemeType) =>
  StyleSheet.create({
    wrapper: {
      alignItems: "center",
    },
    container: {
      backgroundColor: theme.surface,
      justifyContent: "center",
      alignItems: "center",
      borderWidth: 1,
      borderColor: theme.border,
      shadowColor: "#000000",
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 2,
      elevation: 2,
    },
    selectedContainer: {
      borderColor: theme.primary,
      borderWidth: 2,
    },
    selectionIndicator: {
      position: "absolute",
      backgroundColor: theme.primary,
      justifyContent: "center",
      alignItems: "center",
      zIndex: 2,
    },
    name: {
      marginTop: 4,
      color: theme.onSurface,
      fontSize: 12,
      textAlign: "center",
    },
  });

export default BrandIcon;