import * as React from 'react';
import styled from 'styled-components';
import NavbarItem from './NavbarItem';
import { Route } from 'react-router-dom';
import ApiClient from '../apiClient';

const Aside = styled.aside`
  position: relative;
  width: 0;
  z-index: 10;
`;
const Ul = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0;
`;
const Nav = styled.nav`
  width: 100%;
`;
const NavWrapper = styled.div`
  align-items: center;
  background-color: #d7d7db;
  display: flex;
  flex-direction: column;
  height: 100%;
  ${props => props.collapsed && 'transform: translateX(-100%);'}
  transition: transform 0.4s ease-out;
  width: 270px;
`;
const Span = styled.span`
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
`;

class Navbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      targets: null,
      collapsed: false
    };
  }

  componentDidMount() {
    ApiClient.get('/data/targets.json').then(response => {
      const parsedResponse = response.targets.map(target => {
        return {
          path: `/${target.name.toLowerCase()}`,
          label: `${target.name}`,
          icon: `/images/${target.icon}`
        };
      });
      this.setState({ targets: parsedResponse });
    });
  }

  handleToggleCollapsed = () => {
      this.setState({
        collapsed: !this.state.collapsed
      });
    };

  render() {
    return (
      <Aside className={this.props.className}>
        <Span onClick={this.handleToggleCollapsed}> >> </Span>
        <NavWrapper collapsed>
          <Nav>
            <Ul>
              <Route path="/runs">
                <NavbarItem label="All Runs" basePath="/runs" />
              </Route>

              <Route path="/new">
                <NavbarItem label="Create New Run" basePath="/new" sublinks={this.state.targets} />
              </Route>
            </Ul>
          </Nav>
        </NavWrapper>
      </Aside>
    );
  }
}

export default Navbar;