import styled, { createGlobalStyle } from 'styled-components';
import { useMemo } from 'react';
import { Flex, Card, CardHeader, CardContent, Text, FieldValueItem, Icon, useElement, createUID, colorsForCategories } from '@pega/cosmos-react-core';
import { useMonitoredSize } from '@pega/cosmos-react-core/lib/components/PageTemplates/GridLayout/utils';
import { FeedDemo } from '../../social/Feed/Feed.stories';
import { MockSummaryList } from '../../work/CaseView/CaseView.mocks';
import { StyledGridChildWrapper } from './PageTemplates.styles';
export const StyledStory = styled(Flex) `
  block-size: 100%;
`;
export const SbGlobalHeight = createGlobalStyle `
  /* To propagate body height down to the stories */
  /* stylelint-disable-next-line selector-max-id */
  #storybook-root,
  .sb-show-main.sb-main-fullscreen {
    height: 100%;
  }
`;
const randomlyPickInList = (arr) => {
    return arr[Math.floor(arr.length * Math.random())];
};
const StyledCard = styled.article `
  inline-size: 100%;
  block-size: 100%;
`;
const ParagraphCard = ({ className }) => {
    return (<Card as={StyledCard} className={className}>
      <CardHeader>
        <Text variant='h2'>Simple Card</Text>
      </CardHeader>
      <CardContent>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      </CardContent>
    </Card>);
};
const StyledParagraphCard = styled(ParagraphCard) `
  height: 100%;
  width: 100%;
  overflow: auto;
`;
const StyledTrendIcon = styled(Icon) `
  color: ${props => props.theme.components.sentiment.positive.color};
`;
const StyledFieldList = styled.dl `
  display: contents;
`;
const SimpleValueDemo = () => (<Card as={StyledCard}>
    <CardContent container={{ direction: 'column', gap: 0.5 }}>
      <StyledFieldList>
        <FieldValueItem name='Revenue this year' value={<Text variant='h1' as='span'>
              $9,876,543.21
            </Text>} variant='stacked'/>
      </StyledFieldList>
      <Text variant='secondary'>
        <StyledTrendIcon name='arrow-up'/>
        $1 million over last year
      </Text>
    </CardContent>
  </Card>);
const mockChartTypes = ['COLUMN', 'DONUT', 'COMBO_CHART', 'LINE', 'GAUGE'];
const iconLookup = {
    COLUMN: 'dataviz-column',
    DONUT: 'dataviz-donut',
    COMBO_CHART: 'dataviz-combo',
    LINE: 'dataviz-line',
    GAUGE: 'dataviz-gauge'
};
const StyledChartCard = styled(Card) `
  block-size: 100%;
  inline-size: 100%;
  overflow: auto;
  font-size: ${props => props.fontSize};
  color: ${props => props.color};
`;
const MockChart = ({ chartType }) => {
    const [wrapperEl, setWrapperEl] = useElement(null);
    const size = useMonitoredSize(wrapperEl);
    const fontSize = useMemo(() => {
        if (!size)
            return '20px';
        return `${Math.min(size.width, size.height) * 0.7}px`;
    }, [size]);
    const color = useMemo(() => randomlyPickInList(colorsForCategories(10)), []);
    return (<StyledChartCard ref={setWrapperEl} fontSize={fontSize} color={color} container={{ direction: 'column', justify: 'center' }}>
      <CardContent container={{ alignItems: 'center' }}>
        <Icon name={iconLookup[chartType]} size='font-size'/>
      </CardContent>
    </StyledChartCard>);
};
export const gridBreakpointSetup = {
    breakpoints: { lg: 1000, md: 500, xxs: 0 },
    cols: { lg: 12, md: 8, xxs: 4 },
    rows: { lg: { rowsPerPage: 8 }, md: { rowsPerPage: 6 }, xxs: { rowsPerPage: 4 } }
};
export const getDefaultGridConfig = () => ({
    items: [
        { id: 'simple-value-1', type: 'SIMPLE_VALUE' },
        { id: 'simple-value-2', type: 'SIMPLE_VALUE' },
        { id: 'simple-value-3', type: 'SIMPLE_VALUE' },
        { id: 'simple-value-4', type: 'SIMPLE_VALUE' },
        { id: 'chart-1', type: 'DONUT' },
        { id: 'chart-2', type: 'COLUMN' },
        { id: 'summary-list-1', type: 'SUMMARY_LIST' },
        { id: 'feed-1', type: 'FEED' }
    ],
    layout: {
        lg: [
            { i: 'simple-value-1', x: 0, y: 0, w: 3, h: 1, minW: 2, minH: 1 },
            { i: 'simple-value-2', x: 3, y: 0, w: 3, h: 1, minW: 2, minH: 1 },
            { i: 'simple-value-3', x: 6, y: 0, w: 3, h: 1, minW: 2, minH: 1 },
            { i: 'simple-value-4', x: 9, y: 0, w: 3, h: 1, minW: 2, minH: 1 },
            { i: 'chart-1', x: 0, y: 1, w: 3, h: 3, minW: 2, minH: 2 },
            { i: 'chart-2', x: 3, y: 1, w: 5, h: 3, minW: 2, minH: 2 },
            { i: 'summary-list-1', x: 0, y: 4, w: 8, h: 4, minW: 2, minH: 2 },
            { i: 'feed-1', x: 8, y: 1, w: 4, h: 7, minW: 2, minH: 3 }
        ]
    }
});
const deriveGridItem = (itemType) => {
    switch (itemType) {
        case 'FEED':
            return <FeedDemo />;
        case 'SUMMARY_LIST':
            return <MockSummaryList name='My team' limit={10} actions={null}/>;
        case 'PARAGRAPH':
            return <StyledParagraphCard />;
        case 'SIMPLE_VALUE':
            return <SimpleValueDemo />;
        default:
            return <MockChart chartType={itemType}/>;
    }
};
export const deriveGridChildren = (items) => {
    return items.map(item => (<StyledGridChildWrapper key={item.id}>{deriveGridItem(item.type)}</StyledGridChildWrapper>));
};
export const generateNewItem = (type) => ({
    id: createUID(),
    type: type === 'PARAGRAPH' ? type : randomlyPickInList(mockChartTypes)
});
const savedGridConfigKey = 'StoryBook-SavedGridLayoutConfig';
export const getInitialGridConfig = (ignoreSessionStorage) => {
    if (ignoreSessionStorage)
        return getDefaultGridConfig();
    const previousConfig = sessionStorage.getItem(savedGridConfigKey);
    return previousConfig ? JSON.parse(previousConfig) : getDefaultGridConfig();
};
export const persistGridConfig = (config) => {
    sessionStorage.setItem(savedGridConfigKey, JSON.stringify(config));
};
//# sourceMappingURL=GridLayout.mocks.jsx.map