import { useMemo, useRef, useState } from 'react';
import { Tabs, TabPanel, Flex, Table, Card, CardContent } from '@pega/cosmos-react-core';
import { FeedDemo } from '../../social/Feed/Feed.stories';
const msInHour = 60 * 60 * 1000;
export const PulseMock = ({ markdownMap, onMentionPreview }) => {
    const [currentTab, setCurrentTab] = useState('pulse');
    const tabsRef = useRef(null);
    const historyData = useMemo(() => Array.from({ length: 37 }, (_, i) => {
        return {
            id: i,
            date: new Date(Date.now() - i * 24 * msInHour + Math.random() * 2 * msInHour - msInHour).toLocaleString(),
            description: `Description for history item ${i + 1}`,
            performedBy: 'Constellation Operator'
        };
    }), []);
    return (<Flex container={{ direction: 'column' }}>
      <Tabs tabs={[
            { id: 'pulse', name: 'Pulse' },
            { id: 'history', name: 'History' }
        ]} currentTabId={currentTab} onTabClick={setCurrentTab} ref={tabsRef}/>

      <TabPanel tabId={currentTab} tablistRef={tabsRef}>
        {currentTab === 'pulse' && (<FeedDemo markdownMap={markdownMap} onMentionPreview={onMentionPreview}/>)}
        {currentTab === 'history' && (<Card>
            <CardContent>
              <Table title='History' data={historyData} columns={[
                { renderer: 'date', label: 'Date' },
                { renderer: 'description', label: 'Description' },
                { renderer: 'performedBy', label: 'Performed By' }
            ]}/>
            </CardContent>
          </Card>)}
      </TabPanel>
    </Flex>);
};
//# sourceMappingURL=Pulse.mocks.jsx.map