import { StyleSheet, Text, View } from 'react-native';

type LevelIndicatorProps = {
  isLevel: boolean;
  x: number;
  y: number;
};

export function LevelIndicator({ isLevel, x, y }: LevelIndicatorProps) {
  const bubbleOffsetX = Math.max(-44, Math.min(44, x * 4));
  const bubbleOffsetY = Math.max(-44, Math.min(44, y * 4));

  return (
    <View style={[styles.wrapper, isLevel ? styles.level : styles.notLevel]}>
      <View style={styles.crosshairHorizontal} />
      <View style={styles.crosshairVertical} />
      <View style={[styles.bubble, { transform: [{ translateX: bubbleOffsetX }, { translateY: bubbleOffsetY }] }]} />
      <Text style={styles.status}>{isLevel ? 'Gerade' : 'Nicht gerade'}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    alignItems: 'center',
    alignSelf: 'center',
    borderRadius: 999,
    borderWidth: 10,
    height: 230,
    justifyContent: 'center',
    marginVertical: 26,
    overflow: 'hidden',
    width: 230,
  },
  level: {
    backgroundColor: '#052e16',
    borderColor: '#22c55e',
  },
  notLevel: {
    backgroundColor: '#431407',
    borderColor: '#f97316',
  },
  crosshairHorizontal: {
    backgroundColor: 'rgba(248, 250, 252, 0.28)',
    height: 2,
    position: 'absolute',
    width: '100%',
  },
  crosshairVertical: {
    backgroundColor: 'rgba(248, 250, 252, 0.28)',
    height: '100%',
    position: 'absolute',
    width: 2,
  },
  bubble: {
    backgroundColor: '#f8fafc',
    borderRadius: 999,
    height: 54,
    shadowColor: '#000',
    shadowOpacity: 0.25,
    shadowRadius: 12,
    width: 54,
  },
  status: {
    bottom: 28,
    color: '#f8fafc',
    fontSize: 18,
    fontWeight: '900',
    position: 'absolute',
  },
});