import { FC, useCallback, useContext } from "react";
import { useDispatch } from "react-redux";
import DocsIcon from "@mui/icons-material/TextSnippet";
import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
import { panelHeaderIconWrapperStyle, panelHeaderWrapperStyle } from "./style";
import { SelectedPanelContext } from "../../context/selectedContext";
import { EditableText } from "@/components/EditableText";

export const PanelHeader: FC = () => {
  const { widgetDisplayName } = useContext(SelectedPanelContext);
  const dispatch = useDispatch();
  const docLink = "";

  const handleUpdateDisplayNameByBlur = useCallback(
    (newDisplayName: string) => {
      dispatch(
        componentsActions.updateComponentDisplayNameReducer({
          displayName: widgetDisplayName,
          newDisplayName,
        })
      );
    },
    [dispatch, widgetDisplayName]
  );


  return (
    <div css={panelHeaderWrapperStyle}>
      <EditableText
        key={widgetDisplayName}
        displayName={widgetDisplayName}
        updateDisplayNameByBlur={handleUpdateDisplayNameByBlur}
        // onMouseEnter={onMouseHoverRename}
        // onClick={onMouseClickOnRename}
        // onBlur={onBlurOnRename}
        // onValidate={onValidateOnRename}
      />
      <div css={panelHeaderIconWrapperStyle}>
        {docLink && <DocsIcon />}

      </div>
    </div>
  );
};

PanelHeader.displayName = "PanelHeader";
