import React from 'react';
import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import {Link, useHistory, useRouteMatch} from 'react-router-dom';

const Robot = ({name, category, serialNumber, manufacturer, id, deleteHandler, image}) => {
    const history = useHistory();
    const match = useRouteMatch();

    const crudButtons = <>
        <Button variant="primary" className="mx-2"
                onClick={() => history.push(`${match.path}/form/${id}`)}>Edit</Button>
        <Button variant="danger" className="mx-2" onClick={deleteHandler}>Delete</Button>
    </>

    const loginButton = <>
        <Link to={"/login"}>Please login to edit or delete the robot.</Link>
    </>

    return (
        <Card className="my-3">
            <Card.Body>
                <Row>
                    <Col xs={8}>
                        <Card.Title>{name} ({category.name})</Card.Title>
                        <Card.Text>
                            Serial Number: {serialNumber} <br/>
                            Manufacturer: {manufacturer.name}
                        </Card.Text>
                        {deleteHandler ? crudButtons : loginButton}
                    </Col>
                    <Col xs={4}>
                        <img height={150} src={'/assets/' + image} alt={name}/>
                    </Col>
                </Row>
            </Card.Body>
        </Card>
    )
};

export default Robot;
