import * as React from 'react';
import {
  useState, 
  useRef
} from 'react';
import { FormControl } from 'native-base';
import { connect } from "react-redux";
import { TouchableOpacity, View } from "react-native";
import { TextInput } from 'react-native-gesture-handler';
import Icon from '../../components/icons.js';
import Theme from '../../components/theme.style';

CustomForm = (props) => {
  const styles = {
    activeText: {fontFamily: 'Arial', fontSize: 12, color: Theme.colors.accent},
    default: {fontFamily: 'Arial', paddingBottom: 0, fontSize: 14, color: Theme.colors.gray},
    input: {fontFamily: 'Arial', fontSize: 15, flex: 1, borderWidth: 1, borderColor: Theme.colors.gray, borderRadius: 5, height: 35, padding: 10},
    placeholder: {fontFamily: 'Arial', fontSize: 14, color: Theme.colors.lightGray},
    iconButton: { marginLeft: 10, backgroundColor: Theme.colors.gray, borderRadius: 20 }
  }

  let labelRefs = [useRef()]
  const [focus, setfocus] = useState(false)
  const [activeIndex, setactiveindex] = useState(0)

  const renderItem = (prop, index) => {
    const [value, setValue] = useState();

    React.useEffect(() => {
      setValue(prop.value)
    }, [prop.value])

    React.useEffect(() => {
      
      if(prop.automaticCategory) {
        setValue(prop.value + ` ${prop.category}`)
      }
    }, [])

    return (
      <View style={{marginBottom: 5}}>            
        <FormControl.Label 
          ref={(r) => labelRefs[index - 1] = r} 
          style={activeIndex == index && focus ? styles.activeText : styles.default}>
            {prop.name}
        </FormControl.Label>
        <View style={{flexDirection: 'row', width: '100%', alignItems: 'flex-end'}}>
          <TextInput
            keyboardType={prop.kb || 'default'} 
            returnKeyType={'done'}
            value={value}
            onFocus={() => {
              if(!value && props.type === "button") return;

              setactiveindex(index);
              setfocus(true)
              prop.onFocus ? prop.onFocus() : prop.category && prop.value && setValue(value.replace(` ${prop.category}`, ""))
            }}
            maxLength={prop.maxLength || 255}
            editable={prop.disabled}
            onTouchStart={() => prop.onClick ? prop.onClick() : null}
            onChangeText={(val) => prop.onChangeText ? prop.onChangeText(val) : null}
            onBlur={(e) => {
              if(!value || props.type === "button") return;
              let newValue;
              setactiveindex(0);
              setfocus(false);
              
              if(value && value.includes(".") && value.split(".")[1].length === 0) {
                newValue = value.includes(".") && value.length > 0 && value.split(".")[0];
              } else { 
                newValue = value.includes(".") && value.length > 0 && value.split(".")[1].length === 1 ? `${value}0` : value;
              }

              prop.onBlur ? prop.onBlur() : prop.category && prop.value && setValue(newValue + ` ${prop.category}`)
            }}
            style={[styles.input, { color: props.app_theme?.theme.colors.text }]}
          />            
          {prop.icon ? 
            <TouchableOpacity style={styles.iconButton} onPress={prop.onIconClick}>
              <Icon.AntDesign name="info" size={16} color={Theme.colors.white} />
            </TouchableOpacity> : null
          }
        </View>
      </View>
    )
  }

  const renderItems = () => {
    return props.items.map((item, i) => {
      return renderItem(item, i)
    })
  }

  return (
    <FormControl style={{padding: 0, width: '95%'}}>
      {renderItems()}        
    </FormControl>
  )
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(CustomForm);