import { useState } from 'react';
import styled from '@emotion/styled';
import { SettingSvg } from '../../../../common/icons/icons';
import { Box } from '@mui/material';
// import { ColumnTooltipBox } from './ColumnTooltipBox';
// import { useStageManager } from '../../../StagesAccess/StagesAccessManager';
// import { useSharedTableState } from '../../TableContext';

const TooltipContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0.5rem 0 0.5rem 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  box-shadow:
    2px 2px 2px 0 rgba(88, 114, 76, 0.1),
    0 0 0 1px rgba(127, 191, 123, 0.25);
  background: #258141;
  opacity: ${(props) => (props.mouseEnter ? 1 : 0.2)};
`;

export const Tooltip = ({ colId }) => {
  const [anchorEl, setAnchorEl] = useState(null);
  // const { getStageAccessByColId } = useStageManager();
  // const { tableState, headerManagerRef } = useSharedTableState();

  // const stageData = getStageAccessByColId(colId);

  const handleMouseLeave = () => {
    setAnchorEl(null);
  };

  const handleClick = (e) => {
    setAnchorEl((prev) => (prev === null ? e.currentTarget : null));
  };

  const open = Boolean(anchorEl);

  return (
    <Box
      sx={{
        width: '2rem',
        height: '1rem',
        position: 'absolute',
        top: '0',
        right: '0',
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'flex-end',
      }}
      onMouseLeave={handleMouseLeave}
      onClick={handleClick}
    >
      {/* <TooltipContainer mouseEnter={open}>
        <SettingSvg size=".5rem" />
      </TooltipContainer> */}

      {/* <ColumnTooltipBox
        key={colId}
        anchorEl={anchorEl}
        open={open}
        onClose={handleMouseLeave}
        colId={colId}
        // stageData={stageData}
        colData={headerManagerRef.current.getHeader(colId)}
      /> */}
    </Box>
  );
};
