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'
import PropTypes from 'prop-types';


const CreateScrapeRequest = ({ handleRequest }) => {

    const { t } = useTranslation();
    const [requestObject, setRequestObject] = useState({ location: '' })

    const handleChangePriceType = async selectedOption => {
        setRequestObject(s => ({ ...s, price: selectedOption.value }))
    };
    const handleChangeBedType = async selectedOption => {
        setRequestObject(s => ({ ...s, beds: selectedOption.value }))
    };
    const handleChangeFilterType = async selectedOption => {
        setRequestObject(s => ({ ...s, type: selectedOption.value }))
    };

    const handleChangeLifeStyleType = async selectedOption => {
        setRequestObject(s => ({ ...s, lifestyle: selectedOption.value }))
    };

    console.log("requestObject", requestObject)
    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={requestObject.location} placeholder={t('createScrapeRequest.LocationPlaceholder')} onChange={e => setRequestObject(s => ({ ...s, location: e.target.value }))} />
                            </div>
                        </div>
                        <div className="col-md-2">
                            <div className="form-group">
                                <Select options={prices} value={{ name: requestObject.price, label: requestObject.price }} onChange={handleChangePriceType} />
                            </div>
                        </div>
                        <div className="col-md-2">
                            <div className="form-group">
                                <Select className="cursor-pointer" value={{ name: requestObject.beds, label: requestObject.beds }} options={beds} onChange={handleChangeBedType} />
                            </div>
                        </div>
                        <div className="col-md-2">
                            <Select className="cursor-pointer" value={{ name: requestObject.type, label: requestObject.type }} options={types} onChange={handleChangeFilterType} />
                        </div>
                        <div className="col-md-2">
                            <Select className="cursor-pointer" value={{ name: requestObject.lifestyle, label: requestObject.lifestyle }} options={lifeStyles} onChange={handleChangeLifeStyleType} />
                        </div>
                        <div className="col-md-1">
                            <button type="button" onClick={() => { handleRequest(requestObject); setRequestObject({ location: '' }) }} className="btn btn-outline-primary cursor-pointer">Request</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    );
};

CreateScrapeRequest.propTypes = {
    handleRequest: PropTypes.func
};

export default CreateScrapeRequest;