import React from 'react'
import PropTypes from 'prop-types'
import {
  View, Text, Picker, StyleSheet, Platform
} from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'

import { colors } from '../../../config'

const styles = StyleSheet.create({
  selectEventsContainer: {
    alignSelf: 'stretch',
    marginBottom: 24,
  },
  selectEventsText: {
    ...Platform.select({
      android: {
        fontFamily: 'Roboto',
      },
      ios: {
        fontFamily: 'San Francisco',
      },
    }),
    color: colors.greyDark,
    fontSize: 14,
    fontWeight: '400',
    marginBottom: 12,
  },
  pickerContainer: {
    position: 'relative',
  },
  pickerIcon: {
    position: 'absolute',
    right: 12,
    top: 50 / 2 - 5,
    zIndex: 9999,
  },
  picker: {
    ...Platform.select({
      android: {
        fontFamily: 'Roboto',
      },
      ios: {
        fontFamily: 'San Francisco',
      },
    }),
    height: 50,
    alignSelf: 'stretch',
    backgroundColor: '#F9F9F9',
    zIndex: 9998,
    color: colors.greyDark,
  },
})

const SelectOtherEventType = ({ selectedValue, onValueChange, disabled }) => (
  <View style={styles.selectEventsContainer}>
    <Text style={styles.selectEventsText}>
      {`Event type ${!disabled ? '*' : ''}`}
    </Text>
    <View style={styles.pickerContainer}>
      {!disabled && (
        <Icon
          name="chevron-down"
          size={10}
          color={colors.greyDark}
          style={styles.pickerIcon}
        />
      )}
      <Picker
        style={styles.picker}
        selectedValue={selectedValue}
        onValueChange={onValueChange}
        prompt="Event types"
        mode="dialog"
        enabled={!disabled}
      >
        <Picker.Item label="Damaged container" value="Damaged container" />
        <Picker.Item label="Dirty container" value="Dirty container" />
        <Picker.Item label="Bad smell container" value="Bad smell container" />
        <Picker.Item label="Fumigation ON" value="Fumigation ON" />
        <Picker.Item label="Fumigation OFF" value="Fumigation OFF" />
        <Picker.Item label="Other/Misc." value="Other/Misc." />
      </Picker>
    </View>
  </View>
)

SelectOtherEventType.propTypes = {
  selectedValue: PropTypes.string,
  onValueChange: PropTypes.func,
  disabled: PropTypes.bool,
}

SelectOtherEventType.defaultProps = {
  selectedValue: null,
  onValueChange: () => {},
  disabled: false,
}

export { SelectOtherEventType }