import React from 'react'
import {AD_TYPE_SALE, AD_TYPE_RENT} from '../../../common/enums';

export default class Welcome extends React.Component {

  constructor (props) {
    super(props)

    this.state = {
      type: AD_TYPE_SALE,
      buyButtonImg: 'static/images/sale_1_mobile.png',
      rentButtonImg: 'static/images/rent_0_mobile.png'
    }
  }

  onSaleClick () {
    this.setState({
      type: AD_TYPE_SALE,
      buyButtonImg: 'static/images/sale_1_mobile.png',
      rentButtonImg: 'static/images/rent_0_mobile.png'
    })
  }

  onRentClick () {
    this.setState({
      type: AD_TYPE_RENT,
      buyButtonImg: 'static/images/sale_0_mobile.png',
      rentButtonImg: 'static/images/rent_1_mobile.png'
    })
  }

  onSearchClick () {

  }

  render () {
    let style1 = {
      background:'url(' + this.state.buyButtonImg + ')',
      backgrounSize: 'cover'
    }
    return (
      <div>
      <div className='welcome-container-bg'>
      </div>
      <div className='welcome-container'>

        <div className='welcome-content'>
        <h1>KIVI</h1>
        <h2>Pronađi svoj novi dom!</h2>
        <div>
          <button className='buy-button' style={{background:"url("+this.state.buyButtonImg+") no-repeat"}} onClick={this.onSaleClick.bind(this)}></button>
          <button className='rent-button' style={{background:"url("+this.state.rentButtonImg+") no-repeat"}} onClick={this.onRentClick.bind(this)}></button>
        </div>
        <button className='search-button' onClick={()=>this.props.onSearch({adType: this.state.type})} >TRAŽI</button>
        </div>

      </div>
    </div>
    )
  }
}
