import React from 'react';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import pascalCase from 'pascal-case';
import keys from 'lodash.keys';
import { DataCenterIcon, TritonIcon, ServicesIcon } from './components';
// import { ServicesIcon } from './components';
import * as Overlays from './containers';
import {
Avatar,
Header,
HeaderRow,
HeaderItem,
HeaderItemContent,
HeaderItemSubContent,
HeaderItemIcon,
HeaderFlexibleSpaceItem,
HeaderDividerItem,
HeaderSpace
} from './components';
const UpdateHeaderMutation = gql`
mutation updateHeader($isOpen: Boolean!, $activePanel: String!) {
updateHeader(isOpen: $isOpen, activePanel: $activePanel) @client
}
`;
const GetHeader = gql`
{
isOpen @client
activePanel @client
}
`;
const GetAccount = gql`
{
datacenter {
name
}
account {
login
}
}
`;
//
// toggleSectionOpen('services')}
// active={isOpen && activePanel === 'services'}
// >
// Products & Services
//
//
//
//
//
const Navigation = ({
login,
datacenter,
toggleSectionOpen,
isOpen,
activePanel
}) => (
toggleSectionOpen()}>
{datacenter ? (
toggleSectionOpen('datacenter')}
active={isOpen && activePanel === 'datacenter'}
>
Data Center:
{datacenter}
) : null}
{datacenter ? : null}
{login ? (
Account:
{login}
) : null}
{keys(Overlays).map(panelName =>
React.createElement(Overlays[panelName], {
expanded: isOpen && panelName === pascalCase(activePanel)
})
)}
);
export default compose(
graphql(GetAccount, {
options: () => ({
ssr: false
}),
props: ({ data }) => {
const {
account = {},
datacenter = {},
loading = false,
error = null
} = data;
const { login } = account;
const { name } = datacenter;
return { login, datacenter: name, loading, error };
}
}),
graphql(GetHeader, {
options: () => ({
ssr: false
}),
props: ({ data }) => {
const {
isOpen = false,
activePanel = '',
loading = false,
error = null
} = data;
return { isOpen, activePanel, loading, error };
}
}),
graphql(UpdateHeaderMutation, {
props: ({ mutate, ownProps }) => ({
toggleSectionOpen: (name = '') => {
const { isOpen, activePanel } = ownProps;
return mutate({
variables: {
isOpen: !(isOpen && name === activePanel),
activePanel: name
}
});
}
})
})
)(Navigation);