import PropTypes from 'prop-types';
import { isValidElement } from 'react';
import { Box, Stack, Typography, useMediaQuery } from '@mui/material';
import Tabs from '@arcblock/ux/lib/Tabs';
import AppBadge from './app-badge';
import { useAppInfo } from './app-info-context';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
function useMobile() {
  const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
  return isMobile;
}
function Divider({
  sx = {}
}) {
  const isMobile = useMobile();
  return /*#__PURE__*/_jsx(Box, {
    sx: {
      mx: isMobile ? -2 : -3,
      borderBottom: '1px solid',
      borderColor: 'divider',
      mt: 1.5,
      mb: 1,
      ...sx
    }
  });
}
Divider.propTypes = {
  sx: PropTypes.object
};
function AppHeader({
  onTabChange = () => {}
}) {
  const isMobile = useMobile();
  const {
    icon = undefined,
    name = '',
    description = undefined,
    actions = undefined,
    badges = [],
    tabs = [],
    currentTab = ''
  } = useAppInfo();
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      mb: 3
    },
    children: [/*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        alignItems: 'center',
        gap: 1
      },
      children: [icon && /*#__PURE__*/_jsx(Box, {
        sx: {
          mr: 1
        },
        children: icon
      }), /*#__PURE__*/_jsxs(Stack, {
        sx: {
          flexGrow: 1
        },
        children: [/*#__PURE__*/_jsx(Typography, {
          variant: "h1",
          sx: {
            mb: 0.5
          },
          children: name
        }), description && /*#__PURE__*/_jsx(Typography, {
          variant: "body2",
          color: "text.secondary",
          sx: {
            lineHeight: 1.6,
            '& a': {
              color: 'primary.main'
            },
            maxWidth: 980
          },
          children: description
        })]
      }), !isMobile && actions && /*#__PURE__*/_jsx(Box, {
        sx: {
          ml: 1
        },
        children: actions
      })]
    }), badges.length > 0 && /*#__PURE__*/_jsx(Box, {
      sx: {
        display: 'flex',
        flexWrap: 'wrap',
        gap: 1,
        alignItems: 'center',
        mt: 2
      },
      children: badges.map(({
        ...config
      }, index) => /*#__PURE__*/isValidElement(config) ? config : /*#__PURE__*/_jsx(AppBadge, {
        ...config
      }, config.label || index))
    }), isMobile && actions && /*#__PURE__*/_jsx(Box, {
      sx: {
        mt: isMobile ? 2 : 0
      },
      children: actions
    }), tabs.length <= 1 && /*#__PURE__*/_jsx(Divider, {}), tabs.length > 1 && /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(Tabs, {
        tabs: tabs,
        current: currentTab,
        onChange: onTabChange,
        scrollButtons: "auto",
        sx: {
          mt: 2.5
        }
      }), /*#__PURE__*/_jsx(Divider, {
        sx: {
          mt: 0
        }
      })]
    })]
  });
}
AppHeader.propTypes = {
  icon: PropTypes.node,
  name: PropTypes.string.isRequired,
  description: PropTypes.node,
  actions: PropTypes.node,
  tabs: PropTypes.array,
  currentTab: PropTypes.string,
  onTabChange: PropTypes.func
};
export default AppHeader;