
// import react
import { faBell, faMoon } from '@fortawesome/pro-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useRef, useState } from 'react';
import { Box, Stack, Paper, IconButton, useTheme } from '@mui/material';

// local
import Task from './index';
import useStyles from '../../hooks/useStyles';
import StartMenu from '../Start/Menu';
import useDesktop from '../../hooks/useDesktop';

// nft sidebar
const MoonTaskBar = (props = {}) => {
  // theme
  const theme = useTheme();
  const style = props.style || 'floating';
  const styles = useStyles('MoonTaskBar');
  const desktop = useDesktop();
  const position = props.position || 'bottom';
  const [startMenu, setStartMenu] = useState(false);
  const contentStyles = useStyles('MoonTaskBarContent');

  // menu ref
  const startMenuRef = useRef(null);

  // widths
  const taskBarItemSize = parseInt(theme.spacing(5).replace('px', ''));

  // is vertical
  const isVertical = ['left', 'right'].includes(position);

  // bring to front
  const onBringToFront = (id) => {
    // bring task to front
    desktop.bringTaskToFront({ id });
  };

  // get tasks
  const getTasks = () => {
    // return sorted tasks
    return [...(desktop.tasks || [])].sort((a, b) => {
      // return a,b
      if (a.order > b.order) return 1;
      if (a.order < b.order) return -1;
      return 0;
    });
  };

  // placements
  const placements = {
    top    : 'bottom-start',
    left   : 'right-start',
    right  : 'left-start',
    bottom : 'top-start',
  };

  // return jsx
  return (
    <>
      <Box sx={ styles } ref={ startMenuRef } className={
        [
          'MoonTaskBar-root',
          `MoonTaskBar-${position}`,
          isVertical ? 'MoonTaskBar-vertical' : 'MoonTaskBar-horizontal',
          style === 'floating' ? 'MoonTaskBar-floating' : 'MoonTaskBar-fixed',
        ].filter(b => b).join(' ')
      }>
        <Paper sx={ contentStyles } className={
          [
            'MoonTaskBarContent-root',
            `MoonTaskBarContent-${position}`,
            isVertical ? 'MoonTaskBarContent-vertical' : 'MoonTaskBarContent-horizontal',
            style === 'floating' ? 'MoonTaskBarContent-floating' : 'MoonTaskBarContent-fixed',
          ].join(' ')
        } { ...(theme.components.MoonTaskBarContent?.defaultProps || {}) }>
          <Stack className="MoonTaskBarContent-stack" direction={ isVertical ? 'column' : 'row' } spacing={ 1 }>
            <IconButton sx={ {
              px       : 0,
              width    : `${taskBarItemSize}px`,
              height   : `${taskBarItemSize}px`,
              minWidth : 0,
            } } className="MoonTaskBarContent-button" onClick={ (e) => setStartMenu(true) }>
              <FontAwesomeIcon icon={ faMoon } size="sm" />
            </IconButton>

            <Stack direction={ isVertical ? 'column' : 'row' } sx={ {
              px             : theme.spacing(1),
              flex           : 1,
              alignItems     : 'center',
              justifyContent : isVertical ? 'flex-start' : undefined,
            } } spacing={ 1 }>
              { getTasks().map((task) => {
                // return jsx
                return (
                  <Task key={ `task-${task.id}` } item={ task } position={ position } onBringToFront={ () => onBringToFront(task.id) } />
                );
              }) }
            </Stack>

            <IconButton sx={ {
              px       : 0,
              width    : `${taskBarItemSize}px`,
              height   : `${taskBarItemSize}px`,
              minWidth : 0,
            } } className="MoonTaskBarContent-button">
              <FontAwesomeIcon icon={ faBell } size="sm" />
            </IconButton>
          </Stack>
        </Paper>
      </Box>

      <StartMenu open={ !!startMenu } anchorEl={ startMenuRef.current } placement={ placements[position] } onClose={ () => setStartMenu(false) } />
    </>
  );
};

// export default
export default MoonTaskBar;