import { Ionicons } from '@expo/vector-icons';
import { StyleSheet, Text, View } from 'react-native';
import { colors } from '../../../src/theme';
import { useOnboarding } from '../../../src/hooks';
import { ScreenShell } from '../ui/ScreenShell';
import { YearMonthWheel } from '../ui/WheelPicker';
import { PrimaryButton } from '../ui/PrimaryButton';

export function P13JoinDate() {
  const { data, setData, navigate, back } = useOnboarding();

  // 未滑动滚轮时 state 仍是空串，此时放行会把空年月写进资料
  const canNext = data.joinYear !== '' && data.joinMonth !== '';

  return (
    <ScreenShell title="入职时间" showBack onBack={back}>
      <View style={styles.iconWrap}>
        <Ionicons name="calendar" size={34} color={colors.primary} />
      </View>
      {/* 公司名来自上一步，理论上不会为空；兜底避免拼出「在什么时候入职 」这样的半句话 */}
      <Text style={styles.tip}>
        {data.company ? `在什么时候入职 ${data.company}` : '请选择入职年月'}
      </Text>

      <YearMonthWheel
        year={data.joinYear}
        month={data.joinMonth}
        onYearChange={(v) => setData({ joinYear: v })}
        onMonthChange={(v) => setData({ joinMonth: v })}
        // 入职时间可能在明年，年份要往后留出空间（出生年月则不需要）
        futureYears={5}
      />

      <View style={styles.footer}>
        <PrimaryButton label="下一步" active={canNext} onPress={() => navigate('P14')} />
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  iconWrap: {
    width: 64,
    height: 64,
    borderRadius: 18,
    backgroundColor: colors.primaryLight,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
    marginBottom: 12,
  },
  tip: { fontSize: 13, color: colors.textHint, textAlign: 'center', marginBottom: 18 },
  footer: { marginTop: 28 },
});