import { FC, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  isOpenScreenPanel,
  isOpenStylePanel,
  isOpenThemePanel,
} from "@/redux/config/configSelector";
import { PageNavBarProps } from "../PageNavBar/interface";
import { sidebarStyle } from "../../style";
import {  IconButton } from "@mui/material";
import WebAssetIcon from '@mui/icons-material/WebAsset';
import StyleIcon from "@mui/icons-material/Style";
import ColorLensIcon from "@mui/icons-material/ColorLens";
import { configActions } from "@/redux/config/configSlice";
import { globalColor } from "@/utils/colorBuilder";

export const StyleSpaceTree: FC<PageNavBarProps> = (props) => {
  const { className } = props;
  const dispatch = useDispatch();
  const openStylePanel = useSelector(isOpenStylePanel);
  const openThemePanel = useSelector(isOpenThemePanel);
  const openScreenPanel = useSelector(isOpenScreenPanel);
  const handleThemePanel = useCallback(() => {
    dispatch(configActions.updateThemePanel(!openThemePanel));
  }, [dispatch, openThemePanel]);
  const handleScreenPanel = useCallback(() => {
    dispatch(configActions.updateScreenPanel(!openScreenPanel));
  }, [dispatch, openScreenPanel]);
  const handleStylePanel = useCallback(() => {
    dispatch(configActions.updateBottomPanel(true));
    dispatch(configActions.updateStylePanel(!openStylePanel));
  }, [dispatch, openStylePanel]);
  return (
    <div
      style={{
        padding: "15px",
        // fontFamily: "inter",
      }}
    >
      <div
        style={{
          width: "100%",
          overflow: "hidden",
          textOverflow: "ellipsis",
          color: globalColor("grayBlue-02"),
          fontWeight: 500,
          fontSize: "12px",
          marginBottom: "5px",
        }}
      >
        Configure
      </div>
      <div
        className={className}
        style={{
          display: "flex",
          justifyContent: "space-around",
          alignItems: "baseline",
        }}
        css={sidebarStyle}
      >
        <div
          style={{
            width: "20%",
          }}
        >
          <IconButton
            title="Classess"
            color={openStylePanel ? "success" : "default"}
            onClick={handleStylePanel}
            sx={{ fontSize: "10px" }}
          >
            <StyleIcon />
          </IconButton>
          {/* <Divider orientation="vertical" /> */}
        </div>

        <div style={{ width: "20%" }}>
          <IconButton
            title="Themes"
            color={openThemePanel ? "success" : "primary"}
            onClick={handleThemePanel}
            sx={{ fontSize: "10px",color:"gray" }}
          >
            <ColorLensIcon />
          </IconButton>
        </div>
        <div style={{ width: "20%" }}>
         
              <IconButton
              title="Screen"
              onClick={handleScreenPanel}
                sx={{ fontSize: "10px", color: openThemePanel && "green" }}
              >
                <WebAssetIcon />
              </IconButton>
     
        </div>
      </div>
    </div>
  );
};

StyleSpaceTree.displayName = "StyleSpaceTree";
