import { useCallback, useRef, useState, useMemo } from 'react';
import { Button, Card, CardContent, Flex, GridLayoutEditor, GridLayoutViewer, Text, useConfiguration } from '@pega/cosmos-react-core';
import { ParentFitFlexItem } from '@pega/cosmos-react-core/lib/components/PageTemplates/GridLayout/utils';
import { deriveGridChildren, generateNewItem, getInitialGridConfig, gridBreakpointSetup, persistGridConfig, SbGlobalHeight, StyledStory } from './GridLayout.mocks';
export default {
    title: 'Core/PageTemplates/GridLayout',
    parameters: {
        layout: 'fullscreen'
    }
};
export const Editor = () => {
    const handle = useRef(null);
    const [gridConfig, setGridConfig] = useState(getInitialGridConfig);
    const children = useMemo(() => deriveGridChildren(gridConfig.items), [gridConfig.items]);
    const itemLabelMap = useMemo(() => gridConfig.items.reduce((acc, item) => {
        acc[item.id] = item.type;
        return acc;
    }, {}), [gridConfig.items]);
    const addItem = useCallback((type) => {
        const maxYInLayout = gridConfig.layout.lg
            ? Math.max(...gridConfig.layout.lg.map(item => item.y + item.h))
            : 0;
        const newItem = generateNewItem(type);
        const newLayoutObj = { i: newItem.id, x: 0, y: maxYInLayout, w: 4, h: 3, minW: 2, minH: 2 };
        setGridConfig({
            items: [...gridConfig.items, newItem],
            layout: { lg: [...(gridConfig.layout.lg || []), newLayoutObj] }
        });
    }, [gridConfig]);
    const resetGrid = () => {
        setGridConfig(getInitialGridConfig(true));
    };
    const [validityMessage, setValidityMessage] = useState('');
    const validateLayout = useCallback(() => {
        const hasGaps = handle.current?.checkForGaps();
        setValidityMessage(hasGaps ? <Text status='warning'>Has gaps</Text> : <Text status='success'>No gaps</Text>);
    }, [handle]);
    const onModelChange = (newModel) => {
        if (newModel)
            setGridConfig({ ...gridConfig, layout: newModel });
    };
    return (<>
      <SbGlobalHeight />
      <StyledStory container={{ direction: 'column' }}>
        <Card>
          <CardContent container={{ direction: 'row', justify: 'between' }}>
            <Flex container={{ alignItems: 'center', gap: 1 }}>
              <Button onClick={() => addItem('CHART')}>Add chart</Button>
              <Button onClick={() => addItem('PARAGRAPH')}>Add paragraph</Button>
            </Flex>
            <Flex container={{ alignItems: 'center', gap: 1 }}>
              {validityMessage}
              <Button onClick={resetGrid}>Reset</Button>
              <Button onClick={validateLayout}>Validate</Button>
              <Button onClick={() => persistGridConfig(gridConfig)} variant='primary'>
                Persist
              </Button>
            </Flex>
          </CardContent>
        </Card>

        <ParentFitFlexItem>
          <GridLayoutEditor {...gridBreakpointSetup} handle={handle} layoutModel={gridConfig.layout} onModelChange={onModelChange} itemLabelMap={itemLabelMap}>
            {children}
          </GridLayoutEditor>
        </ParentFitFlexItem>
      </StyledStory>
    </>);
};
export const Viewer = () => {
    const { items, layout } = useMemo(() => getInitialGridConfig(), []);
    const children = useMemo(() => deriveGridChildren(items), [items]);
    const { direction } = useConfiguration();
    return (<>
      <SbGlobalHeight />
      <GridLayoutViewer {...gridBreakpointSetup} layoutModel={layout} autoSizeItemIDs={['feed-1']} key={direction}>
        {children}
      </GridLayoutViewer>
    </>);
};
//# sourceMappingURL=GridLayout.stories.jsx.map