import React, { useState, useRef, useEffect } from 'react'
import { Button } from '../Button'
import _ from 'lodash'
import './styles.scss'

function Input ({ label = 'Label', placeholder, value = '', onChange, lineColor, labelColor, icon, fontSize = '22px', labelSize = '22px', onBlur, onFocus, ...rest }) {
  const [active, setActive] = useState(value !== '' ? true : false)
  const [innerValue, setInnerValue] = useState(value || '')

  useEffect(() => {
    // Update the document title using the browser API
    setActive(value !== '')
    setInnerValue(value)
  }, [value]);

  const delayed = useRef(_.debounce(value => onChange(value), 500)).current
  let inputRef = React.createRef()
  const valueChanged = e => {
    setActive(e.target.value !== '')
    setInnerValue(e.target.value)
    if (onChange) delayed(e.target.value)
  }

  const renderIcon = (icon) => {
    switch (icon) {
      case 'profile':
        return (
          <div className='input-icon'>
            <Button.Icon.Profile onClick={() => { inputRef.focus() }} width={20} height={20} />
          </div>
        )
      case 'calendar':
        return (
          <div className='input-icon'>
            <Button.Icon.Calendar onClick={() => { inputRef.focus() }} width={20} height={20} />
          </div>
        )
      case 'timer':
        return (
          <div className='input-icon'>
            <Button.Icon.Timer onClick={() => { inputRef.focus() }} width={20} height={20} />
          </div>
        )
      case 'clock':
        return (
          <div className='input-icon'>
            <Button.Icon.Clock onClick={() => { inputRef.focus() }} width={20} height={20} />
          </div>
        )
      case 'field':
        return (
          <div className='input-icon'>
            <Button.Icon.Field onClick={() => { inputRef.focus() }} width={20} height={20} />
          </div>
        )
      default:
        return <Button.Icon.Profile />
    }
  }

  return (
    <div className='input'>
      <label className={`input-label ${active ? 'input-label-actived' : ''}`} style={ labelColor ? {color: labelColor, fontSize: labelSize} : { fontSize: labelSize } }>{label}</label>
      <input
        {...rest}
        autoComplete="new-password"
        ref={(ref) => inputRef = ref}
        style={ lineColor ? { borderColor: lineColor, fontSize: fontSize } : { fontSize: fontSize } }
        className={`input-text`}
        onChange={valueChanged}
        onFocus={(e) => {
          if (onFocus) onFocus.call(null, e)
          setActive(true)
        }}
        onBlur={(e) => {
          if (onBlur) onBlur.call(null, e)
          setActive( innerValue !== '' ? true : false)
        }}
        value={innerValue}
      />
      {icon && renderIcon(icon)}
    </div>
  )
}

export { Input }