import React, {useState} from 'react';
import { useTranslation } from 'react-i18next';
import Select from 'react-select'
import { prices, beds, types, lifeStyles  } from '../../constants/filters';
import './CreateScrapeRequest.scss'

const CreateScrapeRequest = () => {

    const { t } = useTranslation();  
    const [inputLocation, setLocation] = useState('')
    const [priceFilter, setPriceFilter] = useState('')
    const [bedFilter, setBedFilter] = useState('')
    const [typeFilter, setTypeFilter] = useState('')
    const [lifeStyleFilter, setLifeStyleFilter] = useState('')
   
    const handleChangePriceType = async selectedOption => {
        setPriceFilter(selectedOption)
    };
    const handleChangeBedType = async selectedOption => {
        setBedFilter(selectedOption)
    };
    const handleChangeFilterType = async selectedOption => {
        setTypeFilter(selectedOption)
    };

    const handleChangeLifeStyleType = async selectedOption => {
        setLifeStyleFilter(selectedOption)
    };

    function handleSubmit (event){
        event.preventDefault()
        console.log(inputLocation);
        console.log(priceFilter);
        console.log(bedFilter);
        console.log(typeFilter);
        console.log(lifeStyleFilter);
        
    }
  return (
    <div className="card card-primary">
        <div className="card-header">
        <h3 className="card-title">{t('createScrapeRequest.Title')}</h3>
        </div>      
        <form >
        <div className="card-body">
            <div className="row">
            <div className="col-md-3">
                <div className="form-group">
                    <input type="text" className="form-control input-field cursor-pointer" value={inputLocation} placeholder={t('createScrapeRequest.LocationPlaceholder')} onChange={e => setLocation(e.target.value)}/>
                </div>
            </div>
            <div className="col-md-2">
                <div className="form-group">
                    <Select options={prices} onChange={handleChangePriceType} />
                </div>
            </div>
            <div className="col-md-2">
                <div className="form-group">
                <Select className="cursor-pointer"  options={beds} onChange={handleChangeBedType}/>                    
                </div>
            </div>
            <div className="col-md-2">               
                <Select  className="cursor-pointer" options={types} onChange={handleChangeFilterType}/>                                  
            </div>
            <div className="col-md-2">                
                <Select  className="cursor-pointer" options={lifeStyles} onChange={handleChangeLifeStyleType}/>
            </div>
            <div className="col-md-1">
                <button   type="submit" onClick={handleSubmit} className="btn btn-outline-primary cursor-pointer">Request</button>
            </div>
            </div>
        </div>
        </form>
    </div>
          
  );
};

CreateScrapeRequest.propTypes = {};

export default CreateScrapeRequest;