import { FC, MouseEvent } from 'react';

import { IconMapPinX } from '@material-hu/icons/tabler';
import { useTheme } from '@material-hu/mui/styles';

import HuAvatar from '@material-hu/components/design-system/Avatar';

import { EntrySource } from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { SOURCE_INFO } from '../../../EmployeeTimesheet/utils';

type Props = {
  entrySource: EntrySource;
  locationIncidence: boolean;
  handlePopoverOpen: (e: MouseEvent<HTMLDivElement>) => void;
};

const MarkingSource: FC<Props> = props => {
  const { entrySource, locationIncidence, handlePopoverOpen } = props;
  const { t } = useLokaliseTranslation('time_tracker');
  const { palette } = useTheme();

  const SourceIcon = locationIncidence
    ? IconMapPinX
    : SOURCE_INFO[entrySource].icon;

  const accentColor = locationIncidence
    ? palette.new.text.feedback.warning
    : palette.new.text.neutral.lighter;

  return (
    <div
      aria-label={t('SEE_MARKING_INFO')}
      onClick={e => {
        handlePopoverOpen(e);
      }}
      style={{ cursor: 'pointer' }}
    >
      <HuAvatar
        Icon={SourceIcon}
        size="small"
        color={locationIncidence ? 'warning' : 'default'}
        sx={{
          '&:hover': {
            border: `1px solid ${accentColor}`,
          },
          '.tabler-icon': {
            stroke: accentColor,
            height: 16,
            width: 16,
          },
        }}
      />
    </div>
  );
};

export default MarkingSource;
