import React from 'react';
import Button from '@material-ui/core/Button';

import Drawer from './drawer.jsx';

const Documentation = (props) => (
    <div>
        <Button className="header-icon" touch={true} onClick={() => props.toggleDrawer(true)}>
        <a href={"#" + props.migrateTo}>
            <svg xmlns="http://www.w3.org/2000/svg"
                width="29"
                height="29"
                viewBox="0 -4 26 26"
            >
                <g fill="none" fillRule="evenodd">
                    <path fill="#9e9e9e"
                            d="M5.577 3c2.167 0 3.18.846 3.923 2.127v12.288c-.512 0-1.015-.337-1.33-.59-1.03-.828-3.057-.828-5.222-.828H1.945A.944.944 0 0 1 1 15.054V3.946c0-.522.423-.944.945-.944L5.577 3z"/>
                    <path fill="#AAB7C4"
                            d="M13.423 3c-2.166 0-3.168.894-3.928 2.107L9.5 17.415c.512 0 1.015-.337 1.33-.59 1.03-.828 3.057-.828 5.222-.828h1.003a.944.944 0 0 0 .945-.945V3.947a.944.944 0 0 0-.945-.945L13.423 3z"/>
                </g>
            </svg>
        </a>
        </Button>
        {
            !props.beacons.documentationLink &&
            <span
                className="gps_ring documentation_link_beacon"
                onClick={() => {
                    props.toggleDrawer(true);
                    if(!props.beacons.documentationLink)
                        props.updateBeacon(props.beacons, "documentationLink");
                }}
            />
        }
        <Drawer {...props} />
    </div>
);

export default Documentation;