import { FC, useCallback } from "react";
// import { useTranslation } from "react-i18next"
import { useDispatch, useSelector } from "react-redux";
import {
  // getEditorConfig,
  getIsGridCanvas,
  getIsILLAEditMode,
} from "@/redux/config/configSelector";
import Act21Logo from "@assets/Act21Logo.png";
import { configActions } from "@/redux/config/configSlice";
import {
  descriptionStyle,
  informationStyle,
  navBarStyle,
  rightContentStyle,
  rowCenter,
  viewControlStyle,
} from "./style";
import { Button, FormControlLabel, Switch } from "@mui/material";
import { PageNavBarProps } from "./interface";
import { WindowIcons } from "./WindowIcons";
// import { getCurrentApp } from "@/redux/currentApp/executionTree/executionSelector";
export const PageNavBar: FC<PageNavBarProps> = (props) => {
  const { className } = props;
  const dispatch = useDispatch();
  const isEditMode = useSelector(getIsILLAEditMode);
  const isGridContainer = useSelector(getIsGridCanvas);
  // const App = useSelector(getCurrentApp);
  const handlePreviewButtonClick = useCallback(() => {
    if (isEditMode) {
      dispatch(configActions.updateIllaMode("preview"));
    } else {
      dispatch(configActions.updateIllaMode("edit"));
    }
  }, [dispatch, isEditMode]);

  const PreviewButton = (
    <Button
      variant="outlined"
      sx={{ borderRadius: "10px" }}
      onClick={handlePreviewButtonClick}
    >
      {isEditMode ? "Preview" : "Exit"}
    </Button>
 
  );
  const saveHandler = () =>{
    // localStorage.setItem("pageComponentNode",JSON.stringify(componentNode))
    // localStorage.setItem("pageLayout",JSON.stringify(layout))
    // localStorage.setItem("pageExecutation",JSON.stringify(executation))
    // localStorage.setItem("pageConfig",JSON.stringify(config))
    // localStorage.setItem("App",JSON.stringify(App))
    // console.log(App)
  }
  const SaveButton = (
    <Button
      variant="outlined"
      sx={{ borderRadius: "10px" ,marginLeft:"5px"}}
      onClick={()=>saveHandler()}
    >
     Save
    </Button>
  );
  const handleGridContainerButtonClick = useCallback(() => {
    if (isGridContainer) {
      dispatch(configActions.updateGridContainer(false));
    } else {
      dispatch(configActions.updateGridContainer(true));
    }
  }, [dispatch, isGridContainer]);
  const GridContainerButton = (
    <FormControlLabel
      control={
        <Switch
          checked={isGridContainer}
          onChange={handleGridContainerButtonClick}
          name="antoine"
        />
      }
      label={"Grid Canvas"}
    />
  );

  return (
    <div className={className} css={navBarStyle}>
      <div css={rowCenter}>
        <img src={Act21Logo} width={60} height={20} />

        <div css={informationStyle}>
          ImpaktApps UiBuilder
          <div css={descriptionStyle}>New Way of Web Development</div>
        </div>
      </div>

      <div css={viewControlStyle()}>
        {isEditMode && <WindowIcons />}
        {/* {isPreviewMode && <AppSizeButtonGroup />} */}
      </div>
      <div css={rightContentStyle}>
        {GridContainerButton}
        {PreviewButton}
        {isEditMode && SaveButton}
      </div>
    </div>
  );
};

PageNavBar.displayName = "PageNavBar";
