import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  TouchableWithoutFeedback,
  StyleProp,
  TextStyle,
  ViewStyle,
} from 'react-native';
import React, { ComponentType } from 'react';

import Icon from './Icon';
import { useTheme } from './ThemeContext';
import noop from '../helpers/noop';

export const isEmpty = (str: string): boolean => str.length === 0;

const emptyStyle = {};

export type keyboardType =
  | 'default'
  | 'number-pad'
  | 'decimal-pad'
  | 'numeric'
  | 'email-address'
  | 'phone-pad'
  | 'ascii-capable'
  | 'numbers-and-punctuation'
  | 'url'
  | 'name-phone-pad'
  | 'twitter'
  | 'web-search'
  | 'visible-password';

export type Props = {
  readonly children?: React.ReactNode;
  readonly disabled?: boolean;
  readonly error?: string;
  readonly errorStyle?: StyleProp<TextStyle>;
  readonly iconStyle?: StyleProp<{ color?: string }>;
  readonly inputStyle?: StyleProp<ViewStyle & { color?: string }>;
  readonly inputTestID?: string;
  readonly keyboardType?: keyboardType;
  readonly label?: string;
  readonly labelStyle?: StyleProp<TextStyle>;
  readonly multiline?: boolean;
  readonly onPressIcon?: () => void;
  readonly onTouch?: () => void;
  readonly placeholder?: string;
  readonly rightIcon?: string;
  readonly secureTextEntry?: boolean;
  readonly testID?: string;
  readonly value?: string;
  readonly wrapperStyle?: StyleProp<ViewStyle>;
};

const TouchableTextInput: ComponentType<Props> = ({
  testID,
  inputTestID,
  label = '',
  placeholder = '',
  keyboardType = 'default',
  value,
  onTouch = noop,
  onPressIcon = noop,
  rightIcon = '',
  disabled = false,
  error = '',
  secureTextEntry = false,
  multiline = false,
  wrapperStyle = emptyStyle,
  labelStyle = emptyStyle,
  inputStyle = emptyStyle,
  iconStyle = emptyStyle,
  errorStyle = emptyStyle,
  children = null,
}: Props) => {
  const theme = useTheme();

  const displayedPlaceholder = placeholder === '' ? label : placeholder;
  const displayedLabel = value !== undefined && !isEmpty(value) ? label : '';

  const inputStyleColor = StyleSheet.flatten(inputStyle).color;
  return (
    <View style={StyleSheet.flatten([theme.textInput.wrapper, wrapperStyle])}>
      <Text
        style={StyleSheet.flatten([
          theme.textInput.label,
          !isEmpty(error) ? theme.textInput.errorLabel : emptyStyle,
          labelStyle,
        ])}
      >
        {displayedLabel}
      </Text>
      <View
        style={StyleSheet.flatten([
          theme.textInput.textInput,
          !isEmpty(error) ? theme.textInput.errorTextInput : emptyStyle,
          inputStyle,
        ])}
      >
        <TouchableOpacity
          testID={testID}
          activeOpacity={disabled ? 1.0 : 0.2}
          onPress={disabled ? noop : onTouch}
          style={{ flex: 1.0 }}
        >
          <TextInput
            testID={inputTestID}
            placeholder={displayedPlaceholder}
            keyboardType={keyboardType}
            value={value}
            editable={false}
            pointerEvents="none"
            secureTextEntry={secureTextEntry}
            multiline={multiline}
            scrollEnabled={false}
            placeholderTextColor={theme.textInput.placeholder.color}
            style={StyleSheet.flatten([
              theme.textInput.baseTextInput,
              inputStyleColor !== undefined ? { color: inputStyleColor } : emptyStyle,
              disabled ? theme.textInput.disabledBaseTextInput : emptyStyle,
            ])}
          >
            {children}
          </TextInput>
        </TouchableOpacity>
        <TouchableWithoutFeedback onPress={disabled ? noop : onPressIcon}>
          <View>
            <Icon
              icon={rightIcon}
              size={20.0}
              color={
                StyleSheet.flatten<{ color?: string }>([
                  theme.textInput.icon,
                  !isEmpty(error) ? theme.textInput.errorIcon : emptyStyle,
                  iconStyle,
                ]).color
              }
              wrapperStyle={theme.textInput.icon}
            />
          </View>
        </TouchableWithoutFeedback>
      </View>
      <Text style={StyleSheet.flatten([theme.textInput.errorMessage, errorStyle])}>{error}</Text>
    </View>
  );
};

export default TouchableTextInput;