
// import react
import stc from 'string-to-color';
import React from 'react';
import initials from 'initials';
import { Avatar, Tooltip, useTheme } from '@mui/material';

// use desktop
import useDesktop from '../../hooks/useDesktop';

/**
 * create moon task
 *
 * @param props 
 */
const MoonTask = (props = {}) => {
  // theme
  const theme = useTheme();
  const desktop = useDesktop();

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

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

  // return jsx
  return (
    <Tooltip title={ props.item.name || '' } placement={ placements[props.position] }>
      <Avatar
        sx={ {
          color           : props.item.icon ? undefined : theme.palette.getContrastText(stc(props.item.name || '')),
          width           : taskBarItemSize,
          height          : taskBarItemSize,
          cursor          : 'pointer',
          transition      : 'all 0.2s ease',
          backgroundColor : props.item.icon ? undefined : stc(props.item.name || ''),

          borderRadius : desktop.activeTask === props.item.id ? theme.spacing(1.5) : undefined,
        } }
        src={ props.item.icon }
        onClick={ () => props.onBringToFront() }
      >
        { initials(props.item.name) }
      </Avatar>
    </Tooltip>
  );
};

// export default
export default MoonTask;