import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import Select from 'react-select'
import { prices, beds, types, lifeStyles } from '../../constants/filters';
import { createScrappes } from '../../request/scrappe';
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)
    };

    async function handleSubmit(event) {
        event.preventDefault()
        const res = await createScrappes({ location: inputLocation, price: priceFilter.value, beds: bedFilter.value, type: typeFilter.value, lifestyle: lifeStyleFilter.value })
        console.log(res)
    }
    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;