import React, { memo, useCallback } from 'react';
import { Animated, StyleSheet, Text } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import { G, R } from '../../constants/visits.theme';
import { UserProfile } from '../../types/visits.types';

type AccompagnantPickerProps = {
  fadeAnim: Animated.Value;
  accompagnant: number | null;
  setAccompagnant: (value: number | null) => void;
  userProfiles: UserProfile[];
};

const AccompagnantPicker = ({
  fadeAnim,
  accompagnant,
  setAccompagnant,
  userProfiles,
}: AccompagnantPickerProps) => {
  const onSelect = useCallback(
    (value: number | null) => setAccompagnant(value),
    [setAccompagnant]
  );

  return (
    <Animated.View style={[styles.selectBox, { opacity: fadeAnim }]}>
      <Text style={styles.label}>Nom de l’accompagnant</Text>

      <Picker
        selectedValue={accompagnant}
        onValueChange={onSelect}
        style={styles.picker}
      >
        <Picker.Item label="-- Sélectionnez un accompagnant --" value={null} />
        {userProfiles.length > 0 ? (
          userProfiles.map((user) => (
            <Picker.Item key={user.id} label={user.name} value={user.id} />
          ))
        ) : (
          <Picker.Item label="Aucun accompagnant disponible" value={null} />
        )}
      </Picker>
    </Animated.View>
  );
};

export default memo(AccompagnantPicker);

const styles = StyleSheet.create({
  selectBox: {
    marginTop: 16,
    backgroundColor: G.surface,
    borderRadius: R.sm,
    borderWidth: 1,
    borderColor: G.outline,
    overflow: 'hidden',
  },
  label: {
    fontSize: 12,
    fontWeight: '500',
    color: G.primary,
    paddingHorizontal: 12,
    paddingTop: 8,
  },
  picker: {
    height: 44,
    color: G.text,
    backgroundColor: 'transparent',
  },
});