import React from 'react';
import { Fab } from '@mui/material';
import type { SxProps, Theme } from '@mui/material/styles';
import { useLayout } from '../../contexts/LayoutContext';

interface ChatAwareFabProps {
  onClick: () => void;
  children: React.ReactNode;
  color?: 'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning';
  size?: 'small' | 'medium' | 'large';
  'aria-label'?: string;
  sx?: SxProps<Theme>;
}

/**
 * A Fab that automatically shifts right to avoid overlapping the chat panel.
 * Must be rendered inside DashboardLayout (i.e. inside LayoutProvider).
 */
const ChatAwareFab = React.forwardRef<HTMLButtonElement, ChatAwareFabProps>(
  ({ onClick, children, color = 'primary', size, 'aria-label': ariaLabel, sx }, ref) => {
    const { chatPanelOpen, chatPanelWidth } = useLayout();
    return (
      <Fab
        ref={ref}
        color={color}
        size={size}
        aria-label={ariaLabel}
        onClick={onClick}
        sx={[
          {
            position: 'fixed',
            bottom: 32,
            right: chatPanelOpen ? chatPanelWidth + 16 : 80,
            transition: 'right 225ms cubic-bezier(0.4, 0, 0.6, 1)',
          },
          ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
        ]}
      >
        {children}
      </Fab>
    );
  },
);

ChatAwareFab.displayName = 'ChatAwareFab';

export default ChatAwareFab;
