import React, {useState} from 'react';
import {View, TextInput, StyleSheet, Dimensions, Text} from 'react-native';
import {Colors, FONTS} from 'global-styles';
import {RFValue} from 'react-native-responsive-fontsize';
import {Icon} from 'components';
const {width} = Dimensions.get('window');

const _Text = props => {
  const {label, editable, note, error, required, counter} = props;
  const [isFocused, setIsFocused] = useState(false);
  return (
    <View style={styles.container}>
      {label && (
        <Text style={styles.label}>
          {label}
          {required && <Text style={{color: Colors.RED}}>*</Text>}
        </Text>
      )}
      <View style={styles.inputSection(editable)}>
        <TextInput
          {...props}
          style={styles.input(isFocused)}
          editable={editable}
          maxLength={counter ? counter : undefined}
          onChange={e => setIsFocused(e.nativeEvent.text.length > 0)}
          placeholderTextColor={Colors.GREY}
        />
      </View>
      {counter && (
        <Text
          style={styles.counterText}>{`${props.value.length}/${counter}`}</Text>
      )}
      {note && <Text style={styles.note}>{note}</Text>}
      {error && (
        <View style={styles.errorSection}>
          <Icon name="error" type="MaterialIcons" style={styles.errorIcon} />
          <Text style={styles.errorText}>{error}</Text>
        </View>
      )}
    </View>
  );
};

_Text.defaultProps = {
  editable: true,
  note: undefined,
  error: undefined,
  required: false,
  counter: false,
  value: '',
};

const styles = StyleSheet.create({
  container: {},
  label: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(11.5),
    color: Colors.TEXT,
  },
  inputSection: editable => ({
    height: width * 0.12,
    borderWidth: 1,
    borderColor: Colors.LINE_STROKE,
    borderRadius: width * 0.02,
    marginVertical: width * 0.023,
    justifyContent: 'center',
    paddingHorizontal: width * 0.04,
    backgroundColor: editable ? Colors.WHITE : Colors.DISABLED,
  }),
  input: isFocused => ({
    fontFamily: FONTS.poppins[isFocused ? 500 : 400],
    fontSize: RFValue(isFocused ? 13 : 12),
    color: Colors.TEXT,
  }),
  note: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(10),
    color: Colors.TEXT_LIGHT,
    marginTop: -width * 0.005,
  },
  errorSection: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: width * 0.002,
  },
  errorIcon: {
    color: Colors.RED,
  },
  errorText: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(10),
    color: Colors.RED,
    marginTop: -width * 0.001,
    marginLeft: width * 0.01,
  },
  counterText: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(10),
    color: Colors.TEXT_LIGHT,
    alignSelf: 'flex-end',
  },
});

export default _Text;