import {Button, Col, Form, InputGroup, Row} from "react-bootstrap";
import './routeSelector.scss';

const RouteSelector = ({handleInputs, routeStartInput, sendForm, prefillRouteStartInput}) => {
    return (
        <div className="cmp-routeSelector">
            <h2>Modus 2: Feste Route ablaufen</h2>
            <Row>
                <Col xs="12" md="6">
                    <InputGroup className="cmp-routeSelector__route-select-wrapper">
                        <InputGroup.Text id="basic-addon1">Route:</InputGroup.Text>
                        <Form.Select onChange={handleInputs} data-target="routeSelect" aria-label="Default select example" className="cmp-routeSelector__route-select">
                            <option value="67">Chaosroute</option>
                        </Form.Select>
                    </InputGroup>
                </Col>
                <Col xs="12" md="6" className="cmp-routeSelector__start-input">
                    <InputGroup className="">
                        <InputGroup.Text id="basic-addon2">Start</InputGroup.Text>
                        <Form.Control
                            type="text"
                            value={routeStartInput}
                            onChange={handleInputs}
                            data-target="routeStartInput"
                        />
                    </InputGroup>
                    <Button onClick={prefillRouteStartInput} className="cmp-routeSelector__start-button" variant="success" >+1</Button>
                    <Button onClick={sendForm} className="cmp-routeSelector__start-button" variant="success" data-action="route">Start</Button>
                </Col>
            </Row>
        </div>
    )
}

export default RouteSelector;