import React, { ReactNode } from 'react';
import { Container, CustomerMenu, HeroPortal } from '@nova-hf/ui';
import { ActionButtonProps } from '@nova-hf/ui/umd/ts/src/buttons/ActionButton/ActionButton';
import { MainButtonProps } from '@nova-hf/ui/umd/ts/src/buttons/MainButton/MainButton';
import { SecondaryButtonProps } from '@nova-hf/ui/umd/ts/src/buttons/SecondaryButton/SecondaryButton';
import {
  CustomerDisplay,
  CustomerMenuDetails,
  PriceDetails,
} from '@nova-hf/ui/umd/ts/src/sidemenu/CustomerMenu';
import { InfoListProps } from '@nova-hf/ui/umd/ts/src/sidemenu/InfoList';
import { LinkProps as StaffLinkProps } from '@nova-hf/ui/umd/ts/src/sidemenu/StaffMenuLink';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import Layout from 'beta/components/layouts/Layout';
import { inject, observer } from 'mobx-react';

type CustomerMenuLayoutProps = {
  children?: ReactNode;
  heroChildren?: ReactNode;
  heroTitle?: string;
  color?: MainColorType;
  isInverted?: boolean;
  loading?: boolean;
  backButton?: SecondaryButtonProps;
  title?: string;
  subtitle?: string;
  icon?: string;
  button?: MainButtonProps;
  heroButton?: MainButtonProps;
  actionButtons?: Array<ActionButtonProps>;
  details?: Array<CustomerMenuDetails>;
  mainButton?: MainButtonProps;
  isStaff?: boolean;
  staffName?: string;
  staffMenuLinks?: Array<Omit<StaffLinkProps, 'isStaffMenuOpen' | 'onClick'>>;
  userLabel?: string;
  payerLabel?: string;
  user?: CustomerDisplay;
  payer?: CustomerDisplay;
  price?: PriceDetails;
  extraInfo?: Array<InfoListProps>;
};
export const CustomerMenuLayout = ({
  children,
  heroChildren,
  heroTitle,
  color,
  isInverted,
  backButton,
  title,
  subtitle,
  icon,
  button,
  heroButton,
  actionButtons,
  details,
  mainButton,
  isStaff,
  staffName,
  staffMenuLinks,
  userLabel,
  payerLabel,
  user,
  payer,
  price,
  loading,
  extraInfo,
}: CustomerMenuLayoutProps) => {
  return (
    <Layout hideFooter hasCustomerMenu>
      <HeroPortal color={color} title={heroTitle} button={heroButton}>
        {heroChildren}
      </HeroPortal>
      <CustomerMenu
        color={color}
        isLoading={loading}
        isInverted={isInverted}
        backButton={backButton}
        title={title}
        subtitle={subtitle}
        icon={icon}
        button={button}
        mainButton={mainButton}
        details={details}
        actionButtons={actionButtons}
        isStaff={isStaff}
        staffName={staffName}
        staffMenuLinks={staffMenuLinks}
        userLabel={userLabel}
        payerLabel={payerLabel}
        user={user}
        payer={payer}
        price={price}
        extraInfo={extraInfo}
      />
      <Container paddingY={4}>{children}</Container>
    </Layout>
  );
};

export default inject('ui')(observer(CustomerMenuLayout));