import { useNavigate } from 'react-router';

import { IconMailOpened, IconSettings } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuButtonGroup from '@material-hu/components/design-system/ButtonGroup';
import Button from '@material-hu/components/design-system/Buttons/Button';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

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

import { notificationsRoutes } from '../../routes';

type NotificationSidePanelHeaderProps = {
  disableHeaderActions: boolean;
  disableMarkAllRead: boolean;
  onTabChange: () => void;
  onMarkAllRead: () => void;
};

const NotificationSidePanelHeader = ({
  disableHeaderActions,
  disableMarkAllRead,
  onTabChange,
  onMarkAllRead,
}: NotificationSidePanelHeaderProps) => {
  const { t } = useLokaliseTranslation('notifications_center');
  const navigate = useNavigate();
  const theme = useTheme();

  return (
    <Stack>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          p: 2,
        }}
      >
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
        >
          {t('general:notifications')}
        </Typography>
        <Stack sx={{ flexDirection: 'row' }}>
          <HuTooltip
            description={t('mark_all_read')}
            direction="left"
          >
            <Button
              aria-label={t('mark_all_read')}
              sx={{
                width: 40,
                height: 40,
                m: 0,
                p: 0,
                minWidth: 0,
                color: theme.palette.new.text.neutral.default,
                '&:hover': {
                  color: theme.palette.new.text.neutral.disabled,
                },
              }}
              disabled={disableMarkAllRead}
              onClick={onMarkAllRead}
            >
              <IconMailOpened fontSize="small" />
            </Button>
          </HuTooltip>
          <HuTooltip
            description={t('notifications_config')}
            direction="top"
          >
            <Button
              aria-label={t('notifications_config')}
              sx={{
                width: 40,
                height: 40,
                m: 0,
                p: 0,
                minWidth: 0,
                color: theme.palette.new.text.neutral.default,
                '&:hover': {
                  color: theme.palette.new.text.neutral.disabled,
                },
              }}
              disabled={disableHeaderActions}
              onClick={() => navigate(notificationsRoutes.config())}
            >
              <IconSettings fontSize="small" />
            </Button>
          </HuTooltip>
        </Stack>
      </Stack>
      <Divider sx={{ borderBottomWidth: 0.5, color: '#f0f0f0' }} />
      <Stack
        sx={{
          alignItems: 'center',
          m: 1,
          p: 1,
          ...(disableHeaderActions && {
            opacity: 0.6,
            pointerEvents: 'none',
          }),
        }}
      >
        <HuButtonGroup
          labels={[t('general:all_female'), t('unread')]}
          fullWidth
          fixedCheck
          onChange={onTabChange}
          showCheckIcon={false}
        />
      </Stack>
    </Stack>
  );
};

export default NotificationSidePanelHeader;