import React from 'react';
import PropTypes from 'prop-types';
import {Row, Label, Col, Button} from 'reactstrap';
import FontAwesomeIcon from 'react-fontawesome';
import { AppSwitch } from '@coreui/react'

const TextEditorToolbar = (props) => (
  <Row>
    <Col sm={4} md={2}>
      <Label className="mb-0 pt-1">
        <AppSwitch color='success' variant='pill' size='sm' onChange={props.toggleShowHiddenFiles}/>
        <span className="ml-1 align-top">Show hidden files</span>
      </Label>
    </Col>
    <Col sm={4} md={6}>
      <strong>{props.currentFile.name}</strong>
      <span className="mx-2">|</span>
      <Button color="success" size="sm" onClick={props.save}>
        <FontAwesomeIcon className="mr-2" name="save"/>
        Save
      </Button>
      <span className="mx-2">|</span>
      <Button color="danger" size="sm" onClick={props.remove}>
        <FontAwesomeIcon className="mr-2" name="trash"/>
        Delete
      </Button>
    </Col>
    <Col sm={4} md={4}>
      <div className="float-right mr-2">
        {props.isContract &&
          <React.Fragment>
            <Button size="sm" color="primary" onClick={() => props.openAsideTab('overview')}>
              Overview
            </Button>
            <span className="mx-2">|</span>
            <Button size="sm" color="primary" onClick={() => props.openAsideTab('detail')}>
              Detail
            </Button>
            <span className="mx-2">|</span>
            <Button size="sm" color="primary" onClick={() => props.openAsideTab('logger')}>
              Logger
            </Button>
            <span className="mx-2">|</span>
          </React.Fragment>
        }
        <Button size="sm" color="primary" onClick={() => props.openAsideTab('browser')}>
          Browser
        </Button>
      </div>
    </Col>
  </Row>
);

TextEditorToolbar.propTypes = {
  currentFile: PropTypes.object,
  isContract: PropTypes.bool,
  save: PropTypes.func,
  remove: PropTypes.func,
  toggleShowHiddenFiles: PropTypes.func,
  openAsideTab: PropTypes.func
};

export default TextEditorToolbar;

@@ -87,16 +87,30 @@
 , Button
+, Nav, NavLink
 %7D from '
@@ -1033,19 +1033,45 @@
 ght mr-2
+ btn-group
 %22%3E%0A
+        %3CNav%3E%0A  
         
@@ -1091,16 +1091,18 @@
 ract &&%0A
+  
         
@@ -1136,40 +1136,26 @@
     
-%3CButton size=%22sm%22 color=%22primary
+  %3CNavLink href=%22#
 %22 on
@@ -1218,55 +1218,25 @@
     
-Overview%0A            %3C/Button%3E%0A            %3Cspa
+  %3CFontAwesomeIco
 n cl
@@ -1241,36 +1241,83 @@
 className=%22m
-x-2%22%3E%7C%3C/span
+r-2%22 name=%22info-circle%22 /%3E Overview%0A              %3C/NavLink
 %3E%0A          
@@ -1322,40 +1322,26 @@
     
-%3CButton size=%22sm%22 color=%22primary
+  %3CNavLink href=%22#
 %22 on
@@ -1402,53 +1402,25 @@
     
-Detail%0A            %3C/Button%3E%0A            %3Cspa
+  %3CFontAwesomeIco
 n cl
@@ -1433,201 +1433,164 @@
 e=%22m
-x-2%22%3E%7C%3C/span%3E%0A            %3CButton size=%22sm%22 color=%22primary%22 onClick=%7B() =%3E props.openAsideTab('logger')%7D%3E%0A              Logger%0A            %3C/Button%3E%0A            %3Cspan className=%22mx-2%22%3E%7C%3C/span%3E%0A
+r-2%22 name=%22file-text-o%22 /%3E Details%0A              %3C/NavLink%3E%0A              %3CNavLink href=%22#%22 onClick=%7B() =%3E props.openAsideTab('logger')%7D%3ELogger%3C/NavLink%3E%0A  
     
@@ -1621,16 +1621,18 @@
         
+  
 %7D%0A      
@@ -1637,40 +1637,26 @@
     
-%3CButton size=%22sm%22 color=%22primary
+  %3CNavLink href=%22#
 %22 on
@@ -1714,32 +1714,104 @@
     
-Browser%0A        %3C/Button
+  %3CFontAwesomeIcon className=%22mr-2%22 name=%22compass%22 /%3E Browser%0A          %3C/NavLink%3E%0A        %3C/Nav
 %3E%0A  

Refactor the right navigation