import { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import ComputerIcon from "@mui/icons-material/Computer";
import TabletIcon from '@mui/icons-material/Tablet';
import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
import {
  isOpenMobileScreen,
  isOpenDesktopScreen,
  isOpenTabletScreen,
} from "@/redux/config/configSelector";
import { configActions } from "@/redux/config/configSlice";
import { windowIconBodyStyle, windowIconStyle } from "./style";
import { useTheme } from "@mui/material";

export const ScreenIcons = () => {
  const dispatch = useDispatch();
  const theme = useTheme();
  const isDesktopVisible = useSelector(isOpenDesktopScreen);
  const isTabletVisible = useSelector(isOpenTabletScreen);
  const isMobileVisible = useSelector(isOpenMobileScreen);

  const handleClickDesktopIcon = useCallback(() => {
    dispatch(configActions.updateSelectedScreen("Desktop"));
  }, [dispatch]);
  const handleClickTabletIcon = useCallback(() => {
    dispatch(configActions.updateSelectedScreen("Tablet"));
  }, [dispatch]);
  const handleMobileIcon = useCallback(() => {
    dispatch(configActions.updateSelectedScreen("Mobile"));
  }, [dispatch]);

  return (
    <div
      style={{
        pointerEvents: "auto",
      }}
    >
      
      <span css={windowIconBodyStyle(theme)} onClick={handleClickDesktopIcon}>
        <ComputerIcon 
        css={windowIconStyle(isDesktopVisible, theme)} 
        />
        {/* <DesktopIcon css={windowIconStyle(isDesktopVisible, theme)} /> */}
      </span>
      <span css={windowIconBodyStyle(theme)} onClick={handleClickTabletIcon}>
        {/* <TabletIcon css={windowIconStyle(isTabletVisible, theme)} /> */}
        <TabletIcon css={windowIconStyle(isTabletVisible, theme)} />
      </span>
      <span css={windowIconBodyStyle(theme)} onClick={handleMobileIcon}>
        {/* <MobileIcon css={windowIconStyle(isMobileVisible, theme)} /> */}
        <PhoneIphoneIcon css={windowIconStyle(isMobileVisible, theme)} />
      </span>
    </div>
  );
};
