import React from "react";
import {Button, Form} from 'react-bootstrap';
import styled from "styled-components";


const StyledDiv = styled.div`
        flex: 0 0 40%;
        border: 1px solid #ccc;
        box-shadow: 0 2px 3px #ccc;
        margin: 5px;
        padding: 10px;
    `;

const objectRegistration = (props) => {
    const bookCategories = ["Terror", "Comédia", "Acâdemico", "Ficção"].sort();

    const CategoryOptions = (props) => {
        const categories = props.categories;
        return categories.map((category) =>
            <option>{category}</option>
        );
    };

    const saveBook = (event) => {
        console.log("Clicked");
    };

    return (
        <StyledDiv>
            <Form onSubmit={(event) => {saveBook(event)}}>
                <Form.Group controlId="exampleForm.ControlInput1">
                    <Form.Label>Título do livro: </Form.Label>
                    <Form.Control
                        type="text"
                        placeholder="Clean Code: A Handbook of Agile Software Craftsmanship"
                    />
                </Form.Group>
                <Form.Group controlId="exampleForm.ControlSelect1">
                    <Form.Label>Categoria: </Form.Label>
                    <Form.Control as="select">
                        <CategoryOptions categories={bookCategories}/>
                    </Form.Control>
                </Form.Group>
                <Form.Group controlId="exampleForm.ControlTextarea1">
                    <Form.Label>Descrição: </Form.Label>
                    <Form.Control as="textarea" rows="5"/>
                </Form.Group>
                <Button type="button" onClick={saveBook}>Salvar</Button>
            </Form>
        </StyledDiv>
    )
};

export default objectRegistration;