import * as React from 'react';
import {
  useState, 
  useRef
} from 'react';
import { connect } from "react-redux";
import {
  FormControl, 
  Stack, 
  Input, 
  Icon
} from 'native-base';
import Theme from '../../components/theme.style';

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},
    placeholder: {fontFamily: 'Arial', fontSize: 14, color: Theme.colors.lightGray}
}

CustomForm = (props) => {

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

  const renderItem = (prop, index) => {
      return (
      <>            
          <FormControl.Label 
            ref={(r) => labelRefs[index - 1] = r} 
            style={activeIndex == index && focus ? styles.activeText : styles.default}>
                  {prop.name}
          </FormControl.Label>
          <Input
            
            keyboardType={prop.kb || 'default'} 
            returnKeyType={'done'}
            value={prop.value}
            onFocus={() => {
              setactiveindex(index);
              setfocus(true)
              prop.onFocus ? prop.onFocus() : null
            }}
            maxLength={prop.maxLength || 255}
            disabled={prop.disabled}
            onTouchStart={() => prop.onClick ? prop.onClick() : null}
            onChangeText={(val) => prop.onChangeText ? prop.onChangeText(val) : null}
            onBlur={(e) => {
              setactiveindex(0);
              setfocus(false);
              prop.onBlur ? prop.onBlur() : null
            }}
            style={[styles.input, { color: props.app_theme?.theme.colors.text }]}
          />            
          {prop.icon ? <Icon onPress={prop.onIconClick} active name={prop.icon} style={{ fontSize: 20, color: 'gray' }} /> : null}
      </>)
  }

  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);