import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { grayLighter } from '@bufferapp/ui/style/colors';
import Item from './Item';
import Channels from "./Channels";
import AccountManagement from './AccountManagement';
import { UserIsAdmin } from "@bufferapp/analyze-account";
import SidebarHeader from '@bufferapp/ui/SidebarHeader';

const Container = styled.div`
  width: 100%;
  height: 100%;
`;

const Sidebar = styled.div`
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0 0.75rem 0.75rem;
  height: 100%;
  width: 200px;
  background: ${grayLighter};
  box-sizing: border-box;
`;

const bottomSectionStyle = {
  marginTop: "auto"
};

const Group = styled.div`
  margin: 0 0 1.5rem;
`;

const Section = styled.div`
  div:first-child {
    margin-bottom: 8px;
  }
`;

const NavSidebar = props => (
  <Container>
    <Sidebar className="sidebar">
      <Group>
        <Item href="/" {...props}>
          Home
        </Item>
      </Group>
      <Channels {...props} />
      <UserIsAdmin>
        <Section>
          <SidebarHeader title="Tools" />
          <Item href="/campaigns/" {...props}>
            Campaigns
          </Item>
          <Item href="/reports/" {...props}>
            Reports
          </Item>
        </Section>
      </UserIsAdmin>
      <div style={bottomSectionStyle}>
        <AccountManagement {...props} />
      </div>
    </Sidebar>
  </Container>
);

NavSidebar.propTypes = {
  channels: PropTypes.arrayOf(PropTypes.shape({
    service: PropTypes.string,
  })).isRequired,
};

const mapStateToProps = state => ({
  channels: state.navSidebar.channels,
  selectedProfileId: state.profiles.selectedProfile ? state.profiles.selectedProfile.id : '',
});

export default connect(
  mapStateToProps,
)(NavSidebar);