import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class SearchForm extends React.Component {

        constructor(props) {
            super(props)

            this.state = {
                position: '',
                area: '',
                period: '',
                experience: {
                    type: Array,
                    default: () => []
                }
            }
            this.handlePeriodChange = this.handlePeriodChange.bind(this);
        }


        handlePeriodChange(e) {
            this.setState({
                [e.target.name]: e.target.value
            });
        }

        render() {
            return ( <
                form className = 'form search-form'
                onSubmit = {
                    this.handleSubmit
                } >
                <
                div className = "form-row" >

                    <
                    div className = "form-group col-md-2" >
                    <
                    label htmlFor = "period" > Period *< /label> <
                    select className = "form-control"
                    name = "period"
                    id = "period"
                    onChange = {
                        this.handlePeriodChange
                    }
                    value = {
                        this.state.period
                    } >
                    <
                    option value = "1" > 1 < /option> <
                    option value = "3" > 3 < /option> <
                    option value = "7" > 7 < /option> <
                    option value = "30" > 30 < /option> < /
                    select > <
                    /div> < /
                    div >


                    <
                    div className = "form-row" >
                    <
                    div className = "form-group col-md-12 pt-3" >
                    <
                    input id = 'form-button'
                    className = 'btn btn-primary'
                    type = 'submit'
                    placeholder = 'Send' / >
                    <
                    /div> < /
                    div > <
                    /form>
                )
            }
        }

        export {
            SearchForm
        }