Untitled

import React, { memo, useMemo, useState, useCallback, RefObject, useEffect } from 'react';
import { Box, Divider, Drawer, Popover, Typography } from '@mui/material';
import { useTheme, alpha } from '@mui/material/styles';
import { useWidgetSidebar } from 'contexts/WidgetSidebarContext';
import AvgWinLossChartCard from 'ui-component/cards/dashboard/AvgWinLossChartCard';
import WinrateChartCard from 'ui-component/cards/dashboard/WinrateChartCard';
import ProfitChartCard from 'ui-component/cards/dashboard/ProfitChartCard';
import BalancesChartCard from 'ui-component/cards/dashboard/BalancesChartCard';
import { useDashboard } from 'components/widget/DashboardContext';
import { GridItemHTMLElement, GridStack, GridStackNode } from 'gridstack';

interface Widget {
  id: string;
  component: JSX.Element;
  h?: number;
  w?: number;
}
interface WidgetSidebarProps {
  grid: GridStack | null;
}

const WidgetSidebar: React.FC<WidgetSidebarProps> = ({ grid }) => {
  const theme = useTheme();
  const { isWidgetSidebarOpen, toggleSidebar } = useWidgetSidebar();
  const { accountId, dateRange } = useDashboard();

  const [isDragging, setIsDragging] = useState(false);

  const handleDragStart = useCallback(() => {
    setIsDragging(true);
  }, []);

  const handleDragStop = useCallback(() => {
    setIsDragging(false);
  }, []);

  useEffect(() => {
    if (grid) {
      grid.on('added', (event: Event, items: GridStackNode[]) => {
        toggleSidebar();
        console.log(grid.getGridItems()[0].gridstackNode);
      });
    }
  }, [grid]);

  // if (grid) {
  //   grid.on('added', (event: Event, items: GridStackNode[]) => {
  //     console.log(items);
  //   });
  // }
  const widgetsAvailable = useMemo<Widget[]>(
    () => [
      { w: 2, h: 2, id: 'avgWinLoss', component: <AvgWinLossChartCard accountId={accountId} dateRange={dateRange} /> },
      { w: 2, h: 2, id: 'winrate1', component: <WinrateChartCard accountId={accountId} dateRange={dateRange} /> },
      { id: 'balances', component: <BalancesChartCard accountId={accountId} dateRange={dateRange} fromSidebar={true} /> },
      { id: 'profit', component: <ProfitChartCard accountId={accountId} dateRange={dateRange} fromSidebar={true} /> }
    ],
    [accountId, dateRange]
  );

  return (
    <Drawer
      className="widget-sidebar"
      variant="persistent"
      anchor="right"
      open={isWidgetSidebarOpen}
      onClose={toggleSidebar}
      sx={{
        width: '300px', // Control the width of the Drawer
        flexShrink: 0,
        '& .MuiDrawer-paper': {
          backgroundColor: alpha(theme.palette.background.default, 0.9),
          width: '300px',
          boxSizing: 'border-box'
        }
      }}
    >
      <div className="flex flex-col gap-2 p-2 h-full">
        <div className="flex flex-col justify-center mb-4">
          <Typography align="center" variant="h3">
            Dashboard Widgets
          </Typography>
          <Typography align="center" variant="h6" color="GrayText">
            Drag and drop widgets to the dashboard
          </Typography>
        </div>
        <Divider orientation="horizontal" variant="fullWidth" />

        <div className="space-y-4">
          {widgetsAvailable.map((widget) => (
            <div key={widget.id} className="grid-stack-item" gs-h={widget.h} gs-w={widget.w}>
              <div className="grid-stack-item-content">{widget.component}</div>
            </div>
          ))}
        </div>
      </div>
    </Drawer>
  );
};

export default memo(WidgetSidebar);