text: import React, { Component } from 'react';
  import * as PropTypes from 'prop-types';
  import { withRouter, Link } from 'react-router-dom';
  import { compose } from 'ramda';
  import { withStyles } from '@material-ui/core/styles';
  import Button from '@material-ui/core/Button';
  import { ArrowForwardIosOutlined } from '@material-ui/icons';
  import { Application } from 'mdi-material-ui';
  import inject18n from '../../../components/i18n';
  import Security, {
    KNOWLEDGE_KNGETEXPORT,
    KNOWLEDGE_KNUPLOAD,
  } from '../../../utils/Security';
  
  const styles = (theme) => ({
    buttonHome: {
      marginRight: theme.spacing(2),
      padding: '2px 5px 2px 5px',
      minHeight: 20,
      textTransform: 'none',
      color: '#666666',
      backgroundColor: '#ffffff',
    },
    button: {
      marginRight: theme.spacing(2),
      padding: '2px 5px 2px 5px',
      minHeight: 20,
      minWidth: 20,
      textTransform: 'none',
    },
    icon: {
      marginRight: theme.spacing(1),
    },
    arrow: {
      verticalAlign: 'middle',
      marginRight: 10,
    },
  });
  
  class TopMenuTool extends Component {
    render() {
      const {
        t,
        location,
        match: {
          params: { toolId },
        },
        classes,
      } = this.props;
      return (
        <div>
          <Button
            component={Link}
            to="/dashboard/techniques/tools"
            variant="contained"
            size="small"
            color="inherit"
            classes={{ root: classes.buttonHome }}
          >
            <Application className={classes.icon} fontSize="small" />
            {t('Tools')}
          </Button>
          <ArrowForwardIosOutlined
            color="inherit"
            classes={{ root: classes.arrow }}
          />
          <Button
            component={Link}
            to={`/dashboard/techniques/tools/${toolId}`}
            variant={
              location.pathname === `/dashboard/techniques/tools/${toolId}`
                ? 'contained'
                : 'text'
            }
            size="small"
            color={
              location.pathname === `/dashboard/techniques/tools/${toolId}`
                ? 'secondary'
                : 'inherit'
            }
            classes={{ root: classes.button }}
          >
            {t('Overview')}
          </Button>
          <Button
            component={Link}
            to={`/dashboard/techniques/tools/${toolId}/knowledge`}
            variant={
              location.pathname.includes(
                `/dashboard/techniques/tools/${toolId}/knowledge`,
              )
                ? 'contained'
                : 'text'
            }
            size="small"
            color={
              location.pathname.includes(
                `/dashboard/techniques/tools/${toolId}/knowledge`,
              )
                ? 'secondary'
                : 'inherit'
            }
            classes={{ root: classes.button }}
          >
            {t('Knowledge')}
          </Button>
          <Button
            component={Link}
            to={`/dashboard/techniques/tools/${toolId}/reports`}
            variant={
              location.pathname
              === `/dashboard/techniques/tools/${toolId}/reports`
                ? 'contained'
                : 'text'
            }
            size="small"
            color={
              location.pathname
              === `/dashboard/techniques/tools/${toolId}/reports`
                ? 'secondary'
                : 'inherit'
            }
            classes={{ root: classes.button }}
          >
            {t('Reports')}
          </Button>
          <Button
            component={Link}
            to={`/dashboard/techniques/tools/${toolId}/indicators`}
            variant={
              location.pathname.includes(
                `/dashboard/techniques/tools/${toolId}/indicators`,
              )
                ? 'contained'
                : 'text'
            }
            size="small"
            color={
              location.pathname.includes(
                `/dashboard/techniques/tools/${toolId}/indicators`,
              )
                ? 'secondary'
                : 'inherit'
            }
            classes={{ root: classes.button }}
          >
            {t('Indicators')}
          </Button>
          <Security needs={[KNOWLEDGE_KNUPLOAD, KNOWLEDGE_KNGETEXPORT]}>
            <Button
              component={Link}
              to={`/dashboard/techniques/tools/${toolId}/files`}
              variant={
                location.pathname
                === `/dashboard/techniques/tools/${toolId}/files`
                  ? 'contained'
                  : 'text'
              }
              size="small"
              color={
                location.pathname
                === `/dashboard/techniques/tools/${toolId}/files`
                  ? 'secondary'
                  : 'inherit'
              }
              classes={{ root: classes.button }}
            >
              {t('Data')}
            </Button>
          </Security>
          <Button
            component={Link}
            to={`/dashboard/techniques/tools/${toolId}/history`}
            variant={
              location.pathname
              === `/dashboard/techniques/tools/${toolId}/history`
                ? 'contained'
                : 'text'
            }
            size="small"
            color={
              location.pathname
              === `/dashboard/techniques/tools/${toolId}/history`
                ? 'secondary'
                : 'inherit'
            }
            classes={{ root: classes.button }}
          >
            {t('History')}
          </Button>
        </div>
      );
    }
  }
  
  TopMenuTool.propTypes = {
    classes: PropTypes.object,
    location: PropTypes.object,
    match: PropTypes.object,
    t: PropTypes.func,
    history: PropTypes.object,
  };
  
  export default compose(inject18n, withRouter, withStyles(styles))(TopMenuTool);
  