import { useCallback } from "react"
import { useDispatch, useSelector } from "react-redux"
import WindowRightIcon  from '@assets/window-right.svg';
import  WindowLeftIcon from '@assets/window-left.svg';
import  WindowBottomIcon from '@assets/window-bottom.svg';
import {
  isOpenBottomPanel,
  isOpenLeftPanel,
  isOpenRightPanel,
} from "@/redux/config/configSelector"
import { configActions } from "@/redux/config/configSlice"
import { windowIconBodyStyle, windowIconStyle } from "./style"
import { useTheme } from "@mui/material";

export const WindowIcons = () => {
  const dispatch = useDispatch()
const theme = useTheme()
  const leftPanelVisible = useSelector(isOpenLeftPanel)
  const rightPanelVisible = useSelector(isOpenRightPanel)
  const bottomPanelVisible = useSelector(isOpenBottomPanel)

  const handleClickLeftWindowIcon = useCallback(() => {
    dispatch(configActions.updateLeftPanel(!leftPanelVisible))
  }, [dispatch, leftPanelVisible])
  const handleClickRightWindowIcon = useCallback(() => {

    dispatch(configActions.updateRightPanel(!rightPanelVisible))
  }, [dispatch, rightPanelVisible])
  const handleClickBottomWindowIcon = useCallback(() => {
    dispatch(configActions.updateBottomPanel(!bottomPanelVisible))
  }, [bottomPanelVisible, dispatch])

  return (
    <div
      style={{
        pointerEvents: "auto",
      }}
    >
      <span css={windowIconBodyStyle(theme)} onClick={handleClickLeftWindowIcon}>
        <WindowLeftIcon css={windowIconStyle(leftPanelVisible,theme)} />
      </span>
      <span css={windowIconBodyStyle(theme)} onClick={handleClickBottomWindowIcon}>
        <WindowBottomIcon css={windowIconStyle(bottomPanelVisible,theme)} />
      </span>
      <span css={windowIconBodyStyle(theme)} onClick={handleClickRightWindowIcon}>
        <WindowRightIcon css={windowIconStyle(rightPanelVisible,theme)} />
      </span>
    </div>
  )
}
