import React from "react";
import { Query } from "react-apollo";

import { Alert } from "antd";
import Header from "./header.component";

import Spin from "../loading-spinner/loading-spinner.component";
// import Skeleton from "../loading-skeleton/loading-skeleton.component";

import {
  GET_SELECTED_NAV_ITEM,
  GET_LANDING_NAV_ITEMS,
  GET_NAV_ITEMS
} from "../../graphql/metadata.queries";

const HeaderContainer = ({ landingHeader }) => {
  let GET_METADATA;
  if (landingHeader) GET_METADATA = GET_LANDING_NAV_ITEMS;
  else GET_METADATA = GET_NAV_ITEMS;

  return (
    <Query query={GET_SELECTED_NAV_ITEM}>
      {({ loading, error, data: { selectedNavItem } }) => {
        return (
          <Query query={GET_METADATA}>
            {({ loading, error, data }) => {
              if (loading) return <Spin />;
              if (error) return <Alert message={error.message} />;
              const parsedNavItems = JSON.parse(data.masterdata_by_pk.value);
              return (
                <Header
                  landingHeader={landingHeader}
                  selectedNavItem={selectedNavItem}
                  navItems={parsedNavItems}
                />
              );
            }}
          </Query>
        );
      }}
    </Query>
  );
};

export default HeaderContainer;