import { useRef, useEffect, useMemo } from 'react';
import styled from 'styled-components';
import { Popover as CorePopover, Flex, Button, Text, useI18n, useEscape, useOuterEvent, CardHeader, CardFooter, CardContent, Progress, useFocusTrap, useUID, getFocusables, VisuallyHiddenText } from '@pega/cosmos-react-core';
const StyledContent = styled(CardContent) `
  overflow: auto;
`;
const StyledPopover = styled(CorePopover) `
  position: relative;
  width: min(100vh, 60ch);
  min-height: 6rem;
  max-height: calc(100vh - 2rem);
`;
const Popover = ({ loading, heading, target, children, displayHeading = true, onCancel, onSubmit }) => {
    const t = useI18n();
    const headingId = useUID();
    const ref = useRef(null);
    useOuterEvent('mousedown', [ref], onCancel);
    useEscape(onCancel);
    useFocusTrap(ref);
    useEffect(() => {
        getFocusables(ref)[0]?.focus();
    }, []);
    const header = useMemo(() => {
        if (loading)
            return;
        const h2 = (<Text variant='h2' id={headingId}>
        {displayHeading ? heading : <VisuallyHiddenText>{heading}</VisuallyHiddenText>}
      </Text>);
        return displayHeading ? <CardHeader>{h2}</CardHeader> : h2;
    }, [loading, heading, headingId, displayHeading]);
    return (<Flex role='dialog' aria-labelledby={headingId} container={{ direction: 'column' }} as={StyledPopover} target={target} arrow ref={ref}>
      {header}

      <Flex item={{ grow: 1 }} as={StyledContent}>
        {!loading && children}
      </Flex>

      {!loading && (<CardFooter container={{ justify: 'between' }}>
          <Button autoFocus onClick={onCancel}>
            {t('cancel')}
          </Button>
          <Button variant='primary' onClick={onSubmit}>
            {t('submit')}
          </Button>
        </CardFooter>)}

      {loading && <Progress placement='local' message={t('loading')}/>}
    </Flex>);
};
export default Popover;
//# sourceMappingURL=Popover.jsx.map