// Input component
import React from 'react'
import { View, TextInput, StyleSheet, TouchableOpacity } from 'react-native'
import { MaterialIcons } from '@expo/vector-icons'
import { colors, spacing } from '../theme'
import Text from './Text'

const Input = ({
  style,
  label,
  labelStyle,
  leftIconStyle,
  placeholderTextColor,
  helperTextStyle,
  errorTextStyle,
  passwordVisibilityIconStyle,
  m,
  mt,
  mb,
  ml,
  mr,
  mx,
  my = spacing.s_2,
  p,
  pt,
  pb,
  pl,
  pr,
  px,
  py,
  required = false,
  requiredStyle,

  keyboardType = 'default', // default, numeric, email,
  showPassword = false,
  leftIcon = null,
  password = false,
  helperText = null,
  error = { value: false, message: '' },
  variant = 'default', // default, outlined
  textArea = false,
  textAreaHeight = 100,

  ...props
}) => {
  // label: string
  // it's the label of the input
  // optional
  const customLabel = label || ''

  // labelStyle: object
  // it's the style of the label
  // optional
  const customLabelStyle = labelStyle || {}

  // leftIconStyle: object
  // it's the style of the left icon
  // optional
  const customLeftIconStyle = leftIconStyle || {
    color: colors.n_600,
    fontSize: 24,
  }

  // placeholderTextColor: string
  // it's the color of the placeholder
  // optional
  const customPlaceholderTextColor = placeholderTextColor || colors.n_600

  // helperTextStyle: object
  // it's the style of the helper text
  // optional
  const customHelperTextStyle = helperTextStyle || {
    color: colors.n_600,
    fontSize: 14,
    marginTop: spacing.s_1,
  }

  // errorTextStyle: object
  // it's the style of the error text
  // optional
  const customErrorTextStyle = errorTextStyle || {
    color: colors.error,
    fontSize: 14,
    marginTop: spacing.s_1,
  }

  // passwordVisibilityIconStyle: object
  // it's the style of the password visibility icon
  // optional
  const customPasswordVisibilityIconStyle = passwordVisibilityIconStyle || {
    color: colors.n_600,
    fontSize: 24,
  }

  // requiredStyle: object
  // it's the style of the required text
  // optional
  const customRequiredStyle = requiredStyle || {
    color: colors.error,
    fontSize: 14,
  }

  const [show, setShow] = React.useState(false)

  const toggleShowPassword = () => setShow(!show)

  const marginStyle = {
    margin: m,
    marginTop: mt,
    marginBottom: mb,
    marginLeft: ml,
    marginRight: mr,
    marginVertical: my,
    marginHorizontal: mx,
  }
  const paddingStyle = {
    padding: p,
    paddingTop: pt,
    paddingBottom: pb,
    paddingLeft: pl,
    paddingRight: pr,
    paddingVertical: py,
    paddingHorizontal: px,
  }
  return (
    <View style={[marginStyle, paddingStyle]}>
      <Text type='body' mb={2} style={customLabelStyle}>
        {label}
        {required && <Text style={customRequiredStyle}> *</Text>}
      </Text>
      <View
        style={[
          styles.container,
          style,
          variant === 'outlined' && {
            borderColor: error.value ? colors.error : colors.n_600,
            borderWidth: 1,
            backgroundColor: colors.white,
          },

          error.value && { borderColor: colors.error, borderWidth: 1 },
        ]}
      >
        <View style={{ flexDirection: 'row' }}>
          {leftIcon && (
            <MaterialIcons
              name={leftIcon}
              style={
                error.value
                  ? { ...customLeftIconStyle, color: colors.error }
                  : customLeftIconStyle
              }
            />
          )}
          <TextInput
            placeholderTextColor={error.value ? colors.error : colors.n_600}
            placeholder='Placeholder'
            multiline={textArea}
            keyboardType={
              keyboardType === 'numeric'
                ? 'numeric'
                : keyboardType === 'email'
                ? 'email-address'
                : 'default'
            }
            secureTextEntry={password && !show}
            style={[
              styles.input,
              textArea && {
                height: textAreaHeight,
                textAlignVertical: 'top',
                width: '100%',
              },
            ]}
            {...props}
          />
        </View>
        {password && (
          <TouchableOpacity onPress={toggleShowPassword}>
            <MaterialIcons
              name={!show ? 'visibility' : 'visibility-off'}
              style={
                error.value
                  ? {
                      ...customPasswordVisibilityIconStyle,
                      color: colors.error,
                    }
                  : customPasswordVisibilityIconStyle
              }
            />
          </TouchableOpacity>
        )}
        {error.value && (
          <MaterialIcons
            name='error'
            style={{ color: colors.error, fontSize: 24 }}
          />
        )}
      </View>
      {helperText && !error.value && (
        <Text style={customHelperTextStyle}>{helperText}</Text>
      )}
      {error.value && <Text style={customErrorTextStyle}>{error.message}</Text>}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.n_100,
    borderRadius: 4,
    padding: spacing.s_2,
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  input: {
    color: colors.text,
    fontSize: 16,
    marginLeft: spacing.s_2,
    // flex: 1,
    width: '80%',
    // backgroundColor: colors.n_500,
    // height: 40,
  },
})

export default Input