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 { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';
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 { 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 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 }) => {
  let mouseX = useMotionValue(Infinity);

  return (
    <motion.div
      onMouseMove={(e) => mouseX.set(e.pageX)}
      onMouseLeave={() => mouseX.set(Infinity)}
      className="dock"
    >
      {apps.map((app, index) => (
        <AppIcon
          mouseX={mouseX}
          app={app}
          key={index}
          programs={programs}
          data={data}
          onIconClick={onIconClick}
          onInstanceClick={onInstanceClick}
          onCloseInstance={onCloseInstance}
        />
      ))}
    </motion.div>
  );
};

function AppIcon({ mouseX, app, programs, data, onIconClick, onInstanceClick, onCloseInstance }) {
  let ref = useRef(null);
  const [hovered, setHovered] = useState(false);

  let distance = useTransform(mouseX, (val) => {
    let bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
    return val - bounds.x - bounds.width / 2;
  });

  let widthSync = useTransform(distance, [-150, 0, 150], [40, 100, 40]);
  let adjustedWidth = useTransform(widthSync, (width) => (hovered ? width / 0.5 : width));
  let width = useSpring(adjustedWidth, { mass: 0.1, stiffness: 150, damping: 12 });

  return (
    <motion.div
      ref={ref}
      style={{ width }}
      className="app-icon"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onClick={() => onIconClick(app)}
    >
      <div className="TaskBar-app-instances">
        {(programs[app?.id] || []).map((instance) => (
          <div
            className="TaskBar-app-instances-item"
            key={instance}
            onClick={(e) => {
              e.stopPropagation(); // Prevent the parent onClick from triggering
              onInstanceClick(instance);
            }}
          >
            <div className="TaskBar-app-instances-item-title">
              <span>{data[instance]?.title}</span>
              <span
                className="TaskBar-app-instances-item-close"
                onClick={(e) => {
                  e.stopPropagation(); // Prevent the parent onClick from triggering
                  onCloseInstance(instance);
                }}
              >
                <VscClose />
              </span>
            </div>
          </div>
        ))}
      </div>
      <img src={app?.icon} alt={app?.name} />
    </motion.div>
  );
}

const TaskBar = ({
  apps,
  programs,
  programsData,
  onIconClick,
  onInstanceClick,
  onCloseInstance,
  toggleStartMenu,
  showStartMenu,
  startMenuRef,
  themeRef,
  showTheme,
  toggleTheme,
  eventsRef,
  showEvents,
  toggleEvents,
  position
}) => {
  const [isFormOpen, setisFormOpen] = useState(false);

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

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

  const dispatch = useDispatch();
  const theme = useSelector((state) => state.theme.theme);

  const onStartNewProgram = (appId) => {
    dispatch(startNewProgram(appId));
  };

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

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

  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: "Coming soon" },
    { id: 8, hoverImage: hoverImage, icon: icon8, name: "Accounts", startMenu: "Coming 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: "Coming 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 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={programsData}
          onIconClick={onStartNewProgram}
          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;