import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { colors } from '../../../src/theme';

const ITEM_H = 44;

function Column({
  items,
  value,
  onValueChange,
  width,
}: {
  items: string[];
  value: string;
  onValueChange: (v: string) => void;
  width: number;
}) {
  const idx = Math.max(0, items.indexOf(value));
  const handleEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
    const y = e.nativeEvent.contentOffset.y;
    const i = Math.min(items.length - 1, Math.max(0, Math.round(y / ITEM_H)));
    const v = items[i];
    if (v !== value) onValueChange(v);
  };

  return (
    <View style={[styles.col, { width }]}>
      <View style={styles.highlight} pointerEvents="none" />
      <ScrollView
        style={styles.scroll}
        showsVerticalScrollIndicator={false}
        snapToInterval={ITEM_H}
        snapToAlignment="center"
        decelerationRate="fast"
        contentOffset={{ x: 0, y: idx * ITEM_H }}
        contentContainerStyle={{ paddingVertical: ITEM_H }}
        onMomentumScrollEnd={handleEnd}
      >
        {items.map((it) => (
          <View key={it} style={styles.item}>
            <Text style={[styles.itemText, it === value && styles.itemTextActive]}>{it}</Text>
          </View>
        ))}
      </ScrollView>
    </View>
  );
}

interface DualProps {
  year: string;
  month: string;
  onYearChange: (v: string) => void;
  onMonthChange: (v: string) => void;
}

/** 年月双滚轮：用于出生年月 / 首次参加工作 / 入职时间 */
export function YearMonthWheel({ year, month, onYearChange, onMonthChange }: DualProps) {
  const years = Array.from({ length: 40 }, (_, i) => `${2026 - i}年`);
  const months = Array.from({ length: 12 }, (_, i) => `${i + 1}月`);
  return (
    <View style={styles.dual}>
      <Column items={years} value={year} onValueChange={onYearChange} width={130} />
      <Column items={months} value={month} onValueChange={onMonthChange} width={110} />
    </View>
  );
}

const styles = StyleSheet.create({
  col: { height: ITEM_H * 3, position: 'relative' },
  scroll: { flex: 1 },
  highlight: {
    position: 'absolute',
    top: ITEM_H,
    left: 0,
    right: 0,
    height: ITEM_H,
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderColor: colors.border,
    backgroundColor: colors.primaryLight,
    opacity: 0.45,
  },
  item: { height: ITEM_H, alignItems: 'center', justifyContent: 'center' },
  itemText: { fontSize: 18, color: colors.textHint },
  itemTextActive: { fontSize: 20, fontWeight: '700', color: colors.textPrimary },
  dual: { flexDirection: 'row', justifyContent: 'center', gap: 14 },
});