import styled, { createGlobalStyle, css } from 'styled-components';
import { createContext, useLayoutEffect, useMemo } from 'react';
import { defaultThemeProp, Popover, useElement } from '@pega/cosmos-react-core';
const PopoverMockContext = createContext({
    arrow: false,
    primaryPlacement: 'bottom',
    secondaryPlacement: 'none',
    contentSize: 1
});
const Target = styled.div ``;
const PopoverMockHeader = styled.div ``;
const PopoverMockContent = styled.div(() => {
    return css `
    overflow: auto;
  `;
});
const PopoverMockFooter = styled.div ``;
const MockContentBlock = styled.div(({ theme }) => {
    return css `
    min-width: ${theme.base['content-width'].md};
    padding-block: ${theme.base.spacing};
    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};

    &:first-child {
      padding-block-start: 0;
    }

    &:last-child {
      border: none;
      padding-block-end: 0;
    }
  `;
});
MockContentBlock.defaultProps = defaultThemeProp;
const PopoverMock = styled(Popover)(({ theme }) => {
    return css `
    display: flex;
    flex-direction: column;

    ${PopoverMockHeader},
    ${PopoverMockContent},
    ${PopoverMockFooter} {
      padding: calc(2 * ${theme.base.spacing});
    }
  `;
});
PopoverMock.defaultProps = defaultThemeProp;
const GlobalStyle = createGlobalStyle(({ theme }) => {
    return css `
    :root {
      &::before,
      &::after {
        position: fixed;
        content: '';
        background-color: purple;
        display: block;
      }

      &::before {
        left: 0;
        right: 0;
        top: calc(50% - 0.0625rem);
        height: 0.125rem;
      }

      &::after {
        top: 0;
        bottom: 0;
        left: calc(50% - 0.0625rem);
        width: 0.125rem;
      }
    }

    body {
      width: calc(200% - 2rem);
      height: calc(200% - 2rem);
    }

    ${Target} {
      position: absolute;
      width: 2rem;
      height: 2rem;
      inset: 100% auto auto 100%;
      transform: translate(-2rem, -2rem);
      background-color: ${theme.base.palette['foreground-color']};
    }
  `;
});
export const PlaceAndContainMock = ({ arrow, primaryPlacement, secondaryPlacement, contentSize }) => {
    const [target, setTarget] = useElement(null);
    useLayoutEffect(() => {
        const vw = document.documentElement.clientWidth;
        const vh = document.documentElement.clientHeight;
        window.scrollTo(vw / 2 - 16, vh / 2 - 16);
    }, []);
    const mockContent = Array.from({ length: contentSize }, (_, i) => {
        return <MockContentBlock key={i}>Content item {i + 1}</MockContentBlock>;
    });
    const ctxValue = useMemo(() => {
        return { arrow, primaryPlacement, secondaryPlacement, contentSize };
    }, [arrow, primaryPlacement, secondaryPlacement, contentSize]);
    return (<>
      <GlobalStyle />
      <PopoverMockContext.Provider value={ctxValue}>
        <Target ref={setTarget}/>
        <PopoverMock arrow={arrow} target={target} placement={`${primaryPlacement}${secondaryPlacement && secondaryPlacement !== 'none' ? `-${secondaryPlacement}` : ''}`}>
          <PopoverMockHeader>Header</PopoverMockHeader>
          <PopoverMockContent>{mockContent}</PopoverMockContent>
          <PopoverMockFooter>Footer</PopoverMockFooter>
        </PopoverMock>
      </PopoverMockContext.Provider>
    </>);
};
//# sourceMappingURL=Popover.mocks.jsx.map