import React from 'react'
import { NO_OP } from 'exotic'
import { TextInput } from 'src/views/atoms/TextBox'

// ========= input emitting the changes =========

const inputStyles = styled.todo `
  border-color: transparent;
  border-bottom-color: $colors-primary;
`
const wording = {
  shippingaddress: 'Shipping address',
  billingaddress: 'Billing address',
}

/**
 * @type {Atom}
 */
class AutoSuggestInput extends TextInput {
  static defaultProps = {
    ...TextInput.defaultProps,
    // THE ONE TIME WE USE STRINGY BOOLEANS FOR THE DOM (SAD)
    // autoComplete: 'false',
    autocomplete: false,
  }
  // static defaultProps = {
  //   onEmpty: NO_OP,
  //   onValueChanged: NO_OP,
  // }

  /**
   * @inheritdoc
   * @listens onValueChange
   * @param {String | *} value
   */
  // onValueChange = value => {
  //   // console.log({ handleValueChange: value })
  //   if (!value) {
  //     this.props.onEmpty()
  //     return
  //   }
  //   this.props.onValueChanged(value, this)
  // }

  /**
   * @inheritdoc
   * @listens blur
   * @param {Event} event
   */
  // handleBlur(event) {
  //   this.props.onEmpty()
  //   super.handleBlur(event)
  // }
}

export { AutoSuggestInput }
export default AutoSuggestInput
// export { TextInput as AutoSuggestInput }
// export default TextInput
// export { AutoSuggestInput }
// export default AutoSuggestInput