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

import { styles } from './styles';
import { Colors } from 'src/theme';

import ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';

const SeriesSelector = ({
  selectedSeries,
  setSeriesVisible,
  props
}: {
  selectedSeries: {
    id: number;
    name: string;
    group_name: string | null;
  } | null;
  setSeriesVisible: (visible: boolean) => void;
  props: any;
}) => (
  <View>
    <Text style={styles.text}>Series</Text>
    <TouchableOpacity
      style={[
        styles.seriesSelector,
        props.touched.series && !selectedSeries ? { borderColor: Colors.RED, borderWidth: 1 } : {}
      ]}
      onPress={() => setSeriesVisible(true)}
    >
      <Text style={styles.container}>{selectedSeries ? selectedSeries.name : 'Select series'}</Text>
      <ChevronIcon width={18} height={18} />
    </TouchableOpacity>
    {props.touched.series && !selectedSeries ? (
      <Text style={styles.textError}>series is required</Text>
    ) : null}
  </View>
);

export default SeriesSelector;
