/* eslint-disable @typescript-eslint/no-explicit-any */
import { FC, useCallback } from "react";
import { useDispatch, useSelector, useStore } from "react-redux";
import { getIsIMPAKTEditMode } from "@/redux/config/configSelector";
import { configActions } from "@/redux/config/configSlice";
import {
  navBarStyle,
  rightContentStyle,
  rowCenter,
  viewControlStyle,
} from "./style";
import { Button, useTheme } from "@mui/material";
import { WindowIcons } from "./WindowIcons";
import { ScreenIcons } from "./ScreenIcons";


export const PageNavBar: FC<any> = (props) => {
  const {className} = props;
  const theme = useTheme();
  const dispatch = useDispatch();
  const isEditMode = useSelector(getIsIMPAKTEditMode);
  const handlePreviewButtonClick = useCallback(() => {
    if (isEditMode) {
      dispatch(configActions.updateImpaktAppsMode("preview"));
    } else {
      dispatch(configActions.updateImpaktAppsMode("edit"));
    }
  }, [dispatch, isEditMode]);
  const PreviewButton = (
    <Button
      variant="outlined"
      sx={{
        textTransform: "none",
        borderRadius: "10px",
        marginLeft: "5px",

        color: theme.palette.text.secondary,
        border: "none",
        fontSize: "12px",

        "&:hover": {
          border: "none",
          background: theme.palette.background.default,
          // maintain same background on hover
        },
        "&:active": {
          border: "none",
        },
        "&:focus": {
          border: "none",
        },
      }}
      onClick={handlePreviewButtonClick}
    >
      {isEditMode ? "Preview" : "Exit"}
    </Button> 
  );
  const saveHandler = () => {


    if (props.onModelSave) {
      props.onModelSave();
    }
  };
  const SaveButton = (
    <Button
      variant="outlined"
      sx={{
        textTransform: "none",
        borderRadius: "10px",
        marginLeft: "5px",

        color: theme.palette.text.secondary,
        border: "none",
        fontSize: "12px",

        "&:hover": {
          border: "none",
          background: theme.palette.background.default, // maintain same background on hover
        },
        "&:active": {
          border: "none",
        },
        "&:focus": {
          border: "none",
        },
      }}
      onClick={saveHandler}
    >
      Save
    </Button>
  );
  return (
    <div
        className={className}
      css={navBarStyle(theme)}
    >
      <div css={rowCenter}></div>
      <div css={viewControlStyle(theme)}>
        {isEditMode && (
          <div
            style={{
              width: "80px",
              justifyContent: "center",
              borderRadius: "5px",
              height:"20px",
              marginRight: "1px",
            }}
          >
            <WindowIcons />
          </div>
        )}
        {isEditMode && (
          <div
            style={{
              borderLeft: "1px solid gray",
              paddingLeft:"5px",
              height:"18px",
              width: "100px",
              justifyContent: "space-around",
            }}
          >
            <ScreenIcons />
          </div>
        )}
      </div>
      <div css={rightContentStyle}>
        {PreviewButton}
        {isEditMode && SaveButton}
        {/* {isEditMode && DeployButton} */}
      </div>
    </div>
  );
};

PageNavBar.displayName = "PageNavBar";
