import { ApplicationContainer, MasterPageContainer, PageBody, PageContainer, PageHeader, PageHeaderContainer, TopBarRouting } from "arm-core-layouts";
import React, { PureComponent } from 'react';


export function getMasterPageMenuInfo() {
  return [
    { Component: RouteLabelPrinter, pathKey: 'section-1', label: 'Section 1', visible: true, auth: true },
    {
      label: 'Section 2', routesInfo: [
        { Component: RouteLabelPrinter, pathKey: 'section-2.0', label: 'Section 2.0', visible: true, auth: true },
        { Component: RouteLabelPrinter, pathKey: 'section-2.1', label: 'Section 2.1', visible: true, auth: true }
      ]
    }
  ];
}

export default class MasterPage extends PureComponent {
  state = {
    menuInfo: getMasterPageMenuInfo(),
    userMenu: [
      {
        label: 'user',
        className: 'hoverless' //hoverless: unclickable
      },
      // {
      //   label: i18n('USER_INFO.LOG_OUT', 'Disconnettiti'),
      //   onClick: () => logoutOnClick && logoutOnClick().then(() => history.replace('logout'))
      // }
    ]
  }

  render() {
    const { menuInfo, userMenu } = this.state;
    return (
      <ApplicationContainer>
        <TopBarRouting
          menuInfo={menuInfo}
          userMenu={userMenu}
        />
      </ApplicationContainer>
    );
  }
}

function RouteLabelPrinter({ routeLabel }) {
  return (
    <MasterPageContainer>
      <PageContainer>
        <PageHeaderContainer>
          <PageHeader
            title={routeLabel}
          />
        </PageHeaderContainer>

        <PageBody>
          <h1>{routeLabel}</h1>
        </PageBody>
      </PageContainer>
    </MasterPageContainer>
  )
}