import React from 'react';
import {
  TouchableOpacity,
  View,
  StyleProp,
  TextStyle,
  ViewStyle,
} from 'react-native';
import CustomizedTextInput, {
  CustomizedTextInputProps,
} from '@components/CustomizedTextInput';
import Text from '@components/Text';
import {useInstanceProp} from '@redux/selectors';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

interface Props extends CustomizedTextInputProps {
  title: string;
  titleStyle?: StyleProp<TextStyle>;
  onPress?: () => void;
  selectOption?: boolean;
}

function TextInputWithTitle({
  title,
  titleStyle,
  onPress,
  selectOption,
  editable = true,
  ...otherProps
}: Props) {
  const color = useInstanceProp('color');
  return (
    <>
      <Text color={color} style={[styles.text, titleStyle]}>
        {title}
      </Text>
      {selectOption ? (
        <TouchableOpacity
          style={styles.selectContainer}
          onPress={onPress}
          disabled={!editable}>
          <View
            style={[
              styles.selectInput,
              otherProps.style as StyleProp<ViewStyle>,
              otherProps.containerStyle,
            ]}>
            <Text color={!editable ? COLORS.DARKEST_GRAY : undefined}>
              {otherProps.value}
            </Text>
          </View>
        </TouchableOpacity>
      ) : (
        <View style={[styles.widthFull, otherProps.containerStyle]}>
          <CustomizedTextInput editable={editable} {...otherProps} />
        </View>
      )}
    </>
  );
}

export default TextInputWithTitle;