import { GrWindows } from 'react-icons/gr';
import { VscClose, VscRss, VscSearch, VscTriangleUp, VscUnmute } from 'react-icons/vsc';
import { FaBatteryFull, FaCommentAlt } from 'react-icons/fa';
import React, { useState,useRef,useEffect } from 'react';
import { Popover, Button } from 'antd'; 
import Clock from '../Clock/Clock';
import StartIcon from "../../assets/Images/icon-menu/17.jpeg";
import StartMenu from "../../components/StartMenu/StartMenu";
import Taskbar from "../../components/Taskbar/Taskbar";
import { useDispatch, useSelector } from 'react-redux';
import Program from '../../components/Program/Program';
import {
  selectDefaultApps,
  selectTaskBarApps,
} from '../../redux/account/account.selectors';
import { startNewProgram, terminateProgram } from '../../redux/memory/memory.action';
import { selectAppsInstances, selectProgramsData } from '../../redux/memory/memory.selectors';
import InstalledApps from "../../config/apps";
import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import dashboardImg from "../../assets/Images/StartMenu/dashboardTaskbar.png";
import addProjectImg from "../../assets/Images/StartMenu/addProject.png";
import './Taskbar.scss';
import MostUsedApp2 from "../StartMenu/MostUsedApp";
import ProjectsApp from "../StartMenu/Projects";
import SettingsApp from '../StartMenu/SettingsApp';
import UsersApp from '../StartMenu/Users';
import FinanceApps from '../StartMenu/FinanceApp';
import ClientApps from '../StartMenu/ClientsApp';
import TrashApp from '../StartMenu/Trash';
import { MouseSharp } from '@material-ui/icons';
import LogoutModal from '../Header/Items/Logout/Logout';
import icon1 from "../../assets/Images/icon-menu/1.png"
import icon2 from "../../assets/Images/icon-menu/2.png"
import icon3 from "../../assets/Images/icon-menu/3.png"
import icon4 from "../../assets/Images/icon-menu/4.png"
import icon5 from "../../assets/Images/icon-menu/5.png"
import icon6 from "../../assets/Images/icon-menu/6.png"
import icon7 from "../../assets/Images/icon-menu/7.png"
import icon8 from "../../assets/Images/icon-menu/8.png"
import icon9 from "../../assets/Images/icon-menu/9.png"
import icon10 from "../../assets/Images/icon-menu/10.png"
import icon11 from "../../assets/Images/icon-menu/11.png"
import icon12 from "../../assets/Images/icon-menu/12.png"
import icon13 from "../../assets/Images/icon-menu/13.png"
import icon14 from "../../assets/Images/icon-menu/14.png"
import users from "../../assets/Images/Users/users.png"
import hoverImage from "../../assets/Images/backgroundView.png";
import bg8 from '../../assets/Images/window.jpg';
import bg1 from '../../assets/Images/bg1.jpg';
import bg2 from '../../assets/Images/bg2.jpg';
import bg3 from '../../assets/Images/bg3.jpg';
import bg4 from '../../assets/Images/bg5.jpg';
import bg5 from '../../assets/Images/bg5.jpg';
import bg6 from '../../assets/Images/bg6.jpg';
import bg7 from '../../assets/Images/bg7.jpg';
import icon15 from "../../assets/Images/icon-menu/15.png"
import icon16 from "../../assets/Images/icon-menu/16.png"
import Header from '../Header/Header';
import SettingsHeader from '../StartMenu/SettingsHeader';
import IconButton from "@mui/material/IconButton";
import profileImg from "../../assets/Images/User-Profile.png";
import ThemeSwitcher from '../Header/Items/Theme/ThemeSwitcher';
import AppDashboard from "../StartMenu/AppsDashboard";
import CalendarApp from '../StartMenu/Calendar';
import Articles from "../StartMenu/ArticlesApp";
import InvoicesApp from '../StartMenu/Invoices';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPencilAlt,faCalendarAlt } from "@fortawesome/free-solid-svg-icons";
import StickyNote from '../StickyNote/StickyNote';
const TaskBarAppInstances = ({
  apps,
  programs,
  data,
  onIconClick,
  onInstanceClick,
  onCloseInstance,
  position,
  app
}) => {

    const [hoveredIndex, setHoveredIndex] = useState(null);

  const handleMouseEnter = (index) => {
    setHoveredIndex(index);
  };

  const handleMouseLeave = () => {
    setHoveredIndex(null);
  };

  const handleMouseMove = (e, index) => {
    setHoveredIndex(index);
  };

  const getScale = (index) => {
    if (hoveredIndex === null) return 1;
    if (hoveredIndex === index) return 1.6;
    if (hoveredIndex === index - 1 || hoveredIndex === index + 1) return 1.2;
    return 1;
  };

  const Instances = ({ instances,app }) =>
    instances.map((instance) => (
      <div
        className="TaskBar-app-instances-item"
        key={instance}
        onClick={() => onInstanceClick(instance)}
      >
        <div className="TaskBar-app-instances-item-title"  onClick={() => onCloseInstance(instance)}>
          <span>{data[instance].title}</span>
          <span
          className="TaskBar-app-instances-item-close"
        >
          <VscClose />
        </span>
          </div>
          <div className='TaskBar-app-background'>
          {app.hoverImage && <img src={app.hoverImage} />}
          </div>
      </div>
    ));

  const App = ({ app,index, onClick }) => {
    const instances = programs[app?.id] || [];
    return (
      <div
      title={app?.name}
      className={`TaskBar-app${instances.length ? ' TaskBar-app-running' : ''}`}
      onClick={() => (instances.length ? true : onClick(app))}
      onMouseEnter={() => handleMouseEnter(index)}
      onMouseLeave={handleMouseLeave}
      onMouseMove={(e) => handleMouseMove(e, index)}
      style={{ transform: `scale(${getScale(index)})` }}
        
      >
        <div className="TaskBar-app-instances">
          <Instances app={app} instances={programs[app?.id] || []} />
        </div>
        <img src={app?.icon}/>
      </div>
    );
  };

  return apps.map((app,index) => <App key={app?.id} app={app} onClick={onIconClick} index={index} />);
};

const TaskBar = ({
  apps,
  programs,
  programsData,
  onIconClick,
  onMindowsClick,
  onInstanceClick,
  onCloseInstance,
  position,
  toggleStartMenu,
  showStartMenu,
  onStartNewProgram,
  startMenuRef,
  themeRef,
  showTheme,
  toggleTheme,
  eventsRef,
  showEvents,
  toggleEvents
}) =>
{
  const [popoverVisible, setPopoverVisible] = useState(false);
  const [openMenu, setOpenMenu] = useState(false);

  const dispatch = useDispatch();
  const theme = useSelector((state) => state.theme.theme);
  // const [showStartMenu, setShowStartMenu] = useState(false);
  const programsMenu = useSelector(selectProgramsData);
  const appsInstances = useSelector(selectAppsInstances);
  const runningPrograms = Object.keys(programsData);
  const [windows, updateWindows] = useState({ maxZIndex: 100, pId: null });
  const [minimized, updateMinimized] = useState({});
  const taskbarApps = useSelector(selectTaskBarApps);

  const taskbarAndOpenedApps = taskbarApps.concat(Object.keys(appsInstances));



  useEffect(() => {
    document.body.className = `${theme}-mode`;
  }, [theme]);


useEffect(() => {
    document.body.style.backgroundImage = `url(${bg8})`;
  }, []);

 
  // const toggleStartMenu = () => {
  //   setShowStartMenu(prevState => !prevState);

  // };

  const [isFormOpen, setisFormOpen] = useState(false);

  const openLogin = () => {
      setisFormOpen(true);
  };

  const closeLogin = () => {
      setisFormOpen(false);
  };

      const [selectedImage, setSelectedImage] = useState(null);
      
    

      useEffect(() => {
        if (selectedImage) {
          document.body.style.backgroundImage = `url(${selectedImage})`;
          localStorage.setItem('selectedImage', selectedImage); 
        }
      }, [selectedImage]);
    
      useEffect(() => {
        const savedImage = localStorage.getItem('selectedImage');
        if (savedImage) {
          setSelectedImage(savedImage);
        }
      }, []);
    
  
  const onClickProgramWindow = (pId) =>
    updateWindows(({ maxZIndex }) => ({ maxZIndex: maxZIndex + 1, pId }));

  const onToggleMinimize = (pId, to) => {
    const newMinimized = {};
    newMinimized[pId] = to;
    updateMinimized(Object.assign(minimized, newMinimized));
  };

  const onSelectFromTaskBar = (pId) => {
    onClickProgramWindow(pId);
    onToggleMinimize(pId, false);
  };
  const [selectedItem, setSelectedItem] = useState(null);
  const items = [
    { id: 2,hoverImage:{hoverImage}, icon: icon2, name:"Settings", startMenu: <SettingsApp onProgramClick={onStartNewProgram} />},
    { id: 16,hoverImage:{hoverImage}, icon: users, name:"Users", startMenu: <UsersApp onProgramClick={onStartNewProgram} />},
    { id: 3,hoverImage:{hoverImage},  icon: icon3,name:"Company", startMenu: <StartMenu onProgramClick={onStartNewProgram}/>},
    { id: 4,hoverImage:{hoverImage},  icon: icon4,name:"Clients", startMenu: <ClientApps onProgramClick={onStartNewProgram} />},
    { id: 5, hoverImage:{hoverImage}, icon: icon5, name:"Trash", startMenu: <TrashApp onProgramClick={onStartNewProgram} />},
    { id: 6,hoverImage:{hoverImage},  icon: icon6,name:"Apps", startMenu: <AppDashboard onProgramClick={onStartNewProgram} />},
    { id: 7,hoverImage:{hoverImage},  icon: icon7,name:"Downloads", startMenu: "Comming soon"},
    { id: 8,hoverImage:{hoverImage},  icon: icon8,name:"Accounts", startMenu: "Comming soon"},
    { id: 9,hoverImage:{hoverImage},  icon: icon9,name:"Articles", startMenu: <Articles onProgramClick={onStartNewProgram} />},
    { id: 10,hoverImage:{hoverImage},  icon: icon10,name:"Projects", startMenu: <ProjectsApp onProgramClick={onStartNewProgram} />},
    { id: 11,hoverImage:{hoverImage},  icon: icon11,name:"Calendar", startMenu: <CalendarApp onProgramClick={onStartNewProgram}/>},
    { id: 12,hoverImage:{hoverImage},  icon: icon12,name:"Finance", startMenu: <FinanceApps apps={apps} programs={programs} programsData={programsData}/>},
    { id: 13,hoverImage:{hoverImage},  icon: icon13,name:"Email",startMenu: "Comming soon"},
    { id: 14,hoverImage:{hoverImage},  icon: icon14,name:"Invoices", startMenu: <InvoicesApp onProgramClick={onStartNewProgram}/> },
    { id: 15, hoverImage:{hoverImage}, icon: icon15,name:"Dashboard", startMenu: <MostUsedApp2 onProgramClick={onStartNewProgram}/>},
  ];

    useEffect(() => {
    setSelectedItem(items[1]);
  }, []); 



return(
  <div className={`TaskBar ${position === "left" ? "left" : ""} ${position === "right" ? "right" : ""} ${position === "center" ? "center" : ""} ${position === "bottom" ? "bottom" : ""}`}>
    
    <div className="TaskBar-left" >
   
      <div className="TaskBar-startIcon"  >
        <img src={StartIcon}  onClick={toggleStartMenu}/>
      </div>

    </div>
    <div  className="TaskBar-center">
    <div className={`TaskBar-startMenu-list ${showStartMenu ? 'show' : 'hide'}`} ref={startMenuRef}>
        <div className='TaskBar-startMenu-list-top'>
        <div className="TaskBar-folder-list">
        <div className="TaskBar-folder-item logout-app" title="Log out"  onClick={openLogin}>
          <img src={icon1} alt="" />
          <span>Logout</span>
      </div>
        {items.map((item) => (
             <div className="TaskBar-folder-item" title={item.name} onClick={() => setSelectedItem(item)} >
         <img src={item.icon} alt=""   />
         <span>{item.name}</span>
         </div>
        ))}
    
    </div>
    <div className="TaskBar-folder-content">
        {selectedItem && (
          <>
         {selectedItem.startMenu}
          </>
        )}
      </div>
        </div>
      </div>
      <TaskBarAppInstances
        apps={apps}
        programs={programs}
        data={programsMenu}
        onIconClick={onIconClick}
        onInstanceClick={onInstanceClick}
        onCloseInstance={onCloseInstance}
      />
    </div>
    <div className={`TaskBar-right ${position === "left" ? "left" : ""} ${position === "right" ? "right" : ""} ${position === "center" ? "center" : ""} ${position === "bottom" ? "bottom" : ""}`}>
      
    <div className="TaskBar-App " style={{marginRight:'-25px'}}>
    <div className='customize-theme' onClick={toggleEvents}>
    <FontAwesomeIcon icon={faCalendarAlt} />
    </div>
    <div className={`TaskBar-events ${showEvents ? 'show' : 'hide'}`} ref={themeRef}>
  
    <StickyNote toggleEvents={toggleEvents} />
      </div>
    <div className='customize-theme' onClick={toggleTheme}>
    <FontAwesomeIcon icon={faPencilAlt} />
    <p>    Customize</p>
    </div>
    <div className={`TaskBar-customize ${showTheme ? 'show' : 'hide'}`} ref={themeRef}>
    <div className='customize-theme-top'><FontAwesomeIcon icon={faPencilAlt} /><p>Customize theme</p></div>
    <ThemeSwitcher />
      </div>
      </div>
      <div className='TaskBar-App'>
      <IconButton  onClick={openLogin}>
                    <img
                        src={profileImg}
                        alt="Logo"
                        className="logo-image"
                        style={{ width: "29px", height: "29px" }}
                    />
                </IconButton>
                {isFormOpen && <LogoutModal onClose={closeLogin} isOpen={isFormOpen}/>}
      </div>
      <div className="TaskBar-App ">
        <Clock />
      </div>
     
      {isFormOpen && <LogoutModal onClose={closeLogin} isOpen={isFormOpen}/>}
    </div>
  </div>
);
    }
export default TaskBar;