import React, { FC } from 'react';

import { Center, Box, BoxProps } from '@chakra-ui/react';
import { Header, HeaderProps } from './components';
import Spinner from '../spinner';

export interface PageProps extends BoxProps, HeaderProps {
  /** 宽度充满父级 */
  fullWidth?: boolean;
  /** 加载 */
  isLoading?: boolean;
  /** 内容属性 */
  contentProps?: BoxProps;
  /** 内容外是否包裹一层卡片区域，小屏幕时消失 */
  contentWrapped?: boolean;
  headerStyle?: React.CSSProperties;
}

const Page: FC<PageProps> = ({
  children,
  fullWidth,
  isLoading,
  subtitle,
  thumbnail,
  title,
  titleMetadata,
  primaryAction,
  secondaryActions,
  additionalMetaData,
  actionGroups,
  additionalNavigation,
  pagination,
  onBack,
  contentProps,
  headerStyle,
  breadcrumb,
  contentWrapped,
  ...rest
}) => {
  if (isLoading) {
    return (
      <Center h="full">
        <Spinner size="lg" />
      </Center>
    );
  }

  const ContentWrapper = contentWrapped ? Box : React.Fragment;
  const contentWrapperProps = contentWrapped
    ? {
        p: { base: 0, sm: '20px' },
        background: { base: 'transparent', sm: '#fff' },
        boxShadow: {
          base: 'none',
          sm: '0px 2px 6px rgba(12, 72, 128, 0.04)',
        },
        borderRadius: { base: 0, sm: '4px' },
      }
    : {};

  return (
    <Box maxW={fullWidth ? 'none' : '5xl'} m="0 auto" px={{ sm: 6 }} {...rest}>
      <Header
        subtitle={subtitle}
        thumbnail={thumbnail}
        title={title}
        titleMetadata={titleMetadata}
        onBack={onBack}
        primaryAction={primaryAction}
        secondaryActions={secondaryActions}
        additionalMetaData={additionalMetaData}
        actionGroups={actionGroups}
        additionalNavigation={additionalNavigation}
        pagination={pagination}
        breadcrumb={breadcrumb}
        headerStyle={headerStyle}
      />

      <Box my={6} {...contentProps}>
        <ContentWrapper {...contentWrapperProps}>{children}</ContentWrapper>
      </Box>
    </Box>
  );
};

export default Page;