/**
 * @file https://jira.skava.net/browse/SKREACT-701
 * @todo - had it working
 *       - refactored to make it able to be split up
 *       - remaining is connect functionality to work again
 *       - then split & done
 *
 *
 * @todo
 */
import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isFunction, EMPTY_OBJ, EMPTY_ARRAY } from 'exotic'
import { styled } from 'styleh-components'
// import {
//   stringOrNumber,
//   object,
//   array,
//   boolean,
//   func,
//   string,
//   shape,
// } from 'uxui-modules/view-container/types'
// @todo update
import { Loader } from 'uxui/interface/Loader'
import {
  withKeyHandlers,
  withRenderProp,
  defaultOnError,
  AutoSuggestState,
} from 'src/bootstrapper/google'
import { AutoSuggestInput } from './AutoSuggestInput'
import { AutoSuggestItem, DefaultAutoSuggestItem } from './AutoSuggestItem'
import { GoogleLogo } from './GoogleLogo'
import { Wrap, List, Content } from './_elements'

// ========= feature =========

// const wrapStyles = styled.todo `
//   position: relative;
// `
// const Wrap = div('autosuggest-wrap')
// Wrap.styles(wrapStyles)

// const styles = styled.todo `
//   background: $colors-main-background;
//   ${styled.materialShadow(2)}
//   transition: max-height .5s;
//   overflow: scroll;
//   position: absolute;
//   z-index: 1;
//   top: rem(50);
//   padding: $spacing;
//   width: 100%;
//   display: flex;
//   flex-direction: column;
// }
// `
// const Content = section('autosuggest-content-box')
// Content.styles(styles)

/**
 * @todo - this actually  should be a dropdown state too??
 *
 * @type {Organism}
 */
// @googleContainer.connectToData
@withRenderProp(DefaultAutoSuggestItem)
@withKeyHandlers
@observer
class AutoSuggestOrganism extends React.Component {
  // Wrap = Wrap
  // List = List
  // Content = Content

  static AutoSuggestItem = AutoSuggestItem
  static AutoSuggestInput = AutoSuggestInput
  static GoogleLogo = GoogleLogo
  static AutoSuggestState = AutoSuggestState

  /**
   * @todo ...
   */
  // static propTypes = {
  //   value: string,
  //   onChange: func,
  //   onError: func,
  //   shouldClearItemsOnError: boolean,
  //   onSelect: func,
  //   // autocompleteItem: func,
  //   // classList: PropTypes.shape({
  //   options: shape({
  //     bounds: object,
  //     componentRestrictions: object,
  //     location: object,
  //     offset: stringOrNumber,
  //     radius: stringOrNumber,
  //     types: array,
  //   }),
  //   shouldHighlightFirstSuggestion: boolean,
  //   // debounce: number,
  //   className: string,
  //   wrapperClassName: string,
  //   placeholderText: string,
  //   name: string,
  //   type: string,
  //   state: object,
  //   animatePlaceholder: boolean,
  //   validationType: string,
  //   errorMessageFor: string,
  // }

  static defaultProps = {
    shouldClearItemsOnError: false,
    onError: defaultOnError,
    // classList: {},
    // autocompleteItem,
    options: EMPTY_OBJ,
    debounce: 200,
    shouldHighlightFirstSuggestion: false,
  }

  constructor(props) {
    super(props)

    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    this.state = new AutoSuggestState(props)
    this.state.setProps(props)
    /**
     * @todo - this re-load timeout is likely the thing messing it up
     */
    // this.state.connectToGoogleServices(this)
  }

  componentDidMount() {
    this.state.connectToGoogleServices(this)
  }

  // ========= events =========

  // @see state
  // handleSelect(address, placeId) {
  //   // console.log('GOOGLE_AUTOSUGGEST_handleselect')
  //   const { onSelect, onChange } = this.props
  //   if (isFunction(onSelect)) {
  //     onSelect(address, placeId)
  //   }
  //   if (isFunction(onChange)) {
  //     onChange(address, placeId)
  //   }
  // }
  handleOnChangeEmit = event => {
    console.event('GOOGLE_AUTOSUGGEST_onchange')
    const { value } = event.target

    if (!value) {
      this.state.clear()
      return
    }

    this.state.setValue(value)
    this.state.fetchPredictions()
  }

  // ========= RENDERING =========

  renderInput = () => {
    // console.log('GOOGLE_AUTOSUGGEST_renderInput')
    const {
      className,
      wrapperClassName,
      placeholderText,
      name,
      type,
      state,
      animatePlaceholder,
      validationType,
      errorMessageFor,
    } = this.props
    const handleValueChange = this.state.fetchPredictions
    const handleEmptyValue = this.state.clear
    return (
      <AutoSuggestInput
        // state={this.state.inputState}
        state={this.state}
        onValueChange={handleValueChange}
        onEmpty={handleEmptyValue}
        name={name}
        // hoopla={42}
        animatePlaceholder={animatePlaceholder}
        autoComplete={false}
        // className={className}
        wrapperClassName={wrapperClassName}
        placeholderText={placeholderText}
        type={type}
        validationType={validationType}
        errorMessageFor={errorMessageFor}
        value={this.props.value}
        // state={state}
      />
    )
  }

  renderItem = (item, index) => {
    // console.log('GOOGLE_AUTOSUGGEST_renderItem', item)
    const { suggestion } = item

    return (
      <AutoSuggestItem
        {...item}
        {...item.formattedSuggestion}
        item={item}
        index={index}
      >
        {suggestion}
      </AutoSuggestItem>
    )
  }

  renderList = () => {
    console.dev('GOOGLE_AUTOSUGGEST_renderingList')
    const list = this.state.autoSuggestList || EMPTY_ARRAY

    const items = list.map(this.renderItem)
    // @todo - pass in  list as a prop which we have to handle in createElement
    return <List>{items}</List>
  }

  /**
   * @todo - or render when  focused?
   */
  renderWhenContent = () => {
    const list = this.state.autoSuggestList || EMPTY_ARRAY

    if (
      (list.length <= 0 && this.state.isFocused !== true) ||
      this.state.value === ''
    ) {
      /**
       * @todo
       */
      // if (isLoading) {
      //   return <Loader />
      // }

      return ''
    }

    const suggestionList = this.renderList()

    return (
      <Content>
        {suggestionList}
        <GoogleLogo key="google-logo" />
      </Content>
    )
  }

  render() {
    // debug
    // if (typeof window === 'object') {
    //   window.AUTOSUGGEST = this
    // }

    const input = this.renderInput()
    const suggestionContent = this.renderWhenContent()

    return (
      <Wrap>
        {input}
        {suggestionContent}
      </Wrap>
    )
  }
}

export { AutoSuggestOrganism }
export { AutoSuggestOrganism as AutoSuggest }
export default AutoSuggestOrganism