import { View, StyleSheet } from 'react-native';
import type { AddressLabel } from '../core/types';

interface AddressLabelIconProps {
  label: AddressLabel;
  color: string;
  size?: number;
}

const STROKE = 1.5;

/** Minimal View-drawn icons for Home / Work / Other (no react-native-svg). */
export function AddressLabelIcon({ label, color, size = 16 }: AddressLabelIconProps) {
  switch (label) {
    case 'home':
      return (
        <View style={[styles.wrap, { width: size, height: size }]}>
          <View
            style={{
              width: 0,
              height: 0,
              borderLeftWidth: size * 0.5,
              borderRightWidth: size * 0.5,
              borderBottomWidth: size * 0.38,
              borderLeftColor: 'transparent',
              borderRightColor: 'transparent',
              borderBottomColor: color,
              marginBottom: -STROKE,
            }}
          />
          <View
            style={{
              width: size * 0.68,
              height: size * 0.48,
              borderWidth: STROKE,
              borderColor: color,
              borderRadius: 1,
            }}
          />
        </View>
      );
    case 'work':
      return (
        <View style={[styles.wrap, { width: size, height: size }]}>
          <View
            style={{
              width: size * 0.42,
              height: size * 0.22,
              borderWidth: STROKE,
              borderColor: color,
              borderBottomWidth: 0,
              borderTopLeftRadius: 2,
              borderTopRightRadius: 2,
              marginBottom: -STROKE,
            }}
          />
          <View
            style={{
              width: size * 0.85,
              height: size * 0.55,
              borderWidth: STROKE,
              borderColor: color,
              borderRadius: 2,
            }}
          />
        </View>
      );
    case 'other':
      return (
        <View style={[styles.wrap, { width: size, height: size }]}>
          <View
            style={{
              width: size * 0.55,
              height: size * 0.55,
              borderWidth: STROKE,
              borderColor: color,
              borderRadius: size * 0.275,
            }}
          />
          <View
            style={{
              width: 0,
              height: 0,
              borderLeftWidth: size * 0.22,
              borderRightWidth: size * 0.22,
              borderTopWidth: size * 0.32,
              borderLeftColor: 'transparent',
              borderRightColor: 'transparent',
              borderTopColor: color,
              marginTop: -STROKE * 2,
            }}
          />
        </View>
      );
  }
}

/** Map-pin icon for address / location detail sections (section headers). */
export function AddressDetailsIcon({ color, size = 14 }: { color: string; size?: number }) {
  return (
    <View style={[styles.wrap, { width: size, height: size }]}>
      <View
        style={{
          width: size * 0.52,
          height: size * 0.52,
          borderWidth: STROKE,
          borderColor: color,
          borderRadius: size * 0.26,
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <View
          style={{
            width: size * 0.14,
            height: size * 0.14,
            borderRadius: size * 0.07,
            backgroundColor: color,
          }}
        />
      </View>
      <View
        style={{
          width: 0,
          height: 0,
          borderLeftWidth: size * 0.22,
          borderRightWidth: size * 0.22,
          borderTopWidth: size * 0.28,
          borderLeftColor: 'transparent',
          borderRightColor: 'transparent',
          borderTopColor: color,
          marginTop: -STROKE * 2,
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});