import { FC } from 'react';

import Box from '@material-hu/mui/Box';
import Typography from '@material-hu/mui/Typography';

import useTimeInScreen from 'src/hooks/useTimeInScreen';
import { EventName, Modules } from 'src/types/amplitude';
import { Widget } from 'src/types/widgets';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { NavLinkItem } from './sidebar';
import itemsConfig from './sidebar/constants';

type ShortcutsSubmenuProps = {
  links: Widget[];
  onSelectShortcutItem: () => void;
};

const { titleTranslationKey } = itemsConfig.widgets;

const ShortcutsSubmenu: FC<ShortcutsSubmenuProps> = ({
  links,
  onSelectShortcutItem,
}) => {
  useTimeInScreen(EventName.USER_MODULE_USE, { module: Modules.WIDGETS });
  const { t } = useLokaliseTranslation(['dashboard_sidebar_app', 'widgets']);

  return (
    <Box sx={{ px: 2, width: '240px', overflowY: 'auto' }}>
      <Box sx={{ my: 3 }}>
        <Typography sx={{ color: '#000000de', fontWeight: 500 }}>
          {t(titleTranslationKey)}
        </Typography>
      </Box>
      {links && links.length > 0 && (
        <>
          {links?.map(link => (
            <NavLinkItem
              key={link.id}
              itemId={link.id}
              title={link.title}
              path={link.body}
              icon={link.icon}
              onClick={onSelectShortcutItem}
            />
          ))}
        </>
      )}
      {links && links.length === 0 && (
        <Box sx={{ mt: 4 }}>
          <Typography
            color="secondary"
            sx={{ fontSize: '14px' }}
          >
            {t('widgets:no_extras_available')}
          </Typography>
        </Box>
      )}
    </Box>
  );
};

export default ShortcutsSubmenu;