import React from 'react'
import { styled } from '@skava/modules/___dist/view-container'
import { TextInput } from 'src/views/atoms/TextBox'
import { object, any } from '@skava/modules/___dist/view-container/types'

// @todo
// not last-child
// nth(alternate)
const styles = styled.todo `
  border-bottom: 1px solid $colors-light-grey;
`
const defaultItem = {
  index: 0,
  suggestion: '',
  placeId: '0',
  isActive: false,
  // formatted
  mainText: '',
  secondaryText: '',
}
class DefaultAutoSuggestItem extends React.PureComponent {
  static defaultProps = {
    ...defaultItem,
    item: defaultItem,
  }
  // constructor(props) {
  //   this.state = props.item
  // }
  // componentWillReceiveProps(props) {
  //   // console.log({ DefaultAutoSuggestItem }, props)
  // }
  render() {
    const { item, index, placeId } = this.props
    const { mainText, secondaryText, suggestion } = this.props

    return (
      <section key={placeId}>
        <header>{mainText || suggestion}</header>
        <p>{secondaryText}</p>
      </section>
    )
  }
}

// ========= item =========

const ItemWrap = styled.div.className('autosuggest-item') ``

/**
 * @type {Atom}
 */
class AutoSuggestItem extends React.Component {
  static DefaultAutoSuggestItem = DefaultAutoSuggestItem
  static propTypes = {
    children: any,
  }
  render() {
    const { children } = this.props

    return <ItemWrap>{children}</ItemWrap>
  }
}

export { DefaultAutoSuggestItem, AutoSuggestItem }
export default AutoSuggestItem