/*
 * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
 *
 * This file is part of Sophie.
 *
 * Sophie is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, version 3.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */

import { Typography } from '@mui/material';
import Alert, { AlertColor } from '@mui/material/Alert';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import React, { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';

const NotificationBannerRoot = styled(Alert)(({ theme }) => ({
  paddingTop: 7,
  paddingBottom: 6,
  // Match the height of the location bar.
  minHeight: 53,
  borderRadius: 0,
  borderBottom: `1px solid ${theme.palette.divider}`,
  '.MuiAlert-message': {
    flexGrow: 1,
    paddingTop: 0,
    paddingBottom: 4,
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  '.MuiAlert-action': {
    paddingInlineStart: 0,
  },
}));

const NotificationBannerText = styled(Typography)(({ theme }) => ({
  fontSize: 'inherit',
  paddingTop: theme.spacing(1),
  paddingInlineEnd: theme.spacing(2),
  flexGrow: 9999,
}));

const NotificationBannerButtons = styled(Box)(({ theme }) => ({
  fontSize: 'inherit',
  paddingTop: theme.spacing(0.5),
  paddingInlineEnd: theme.spacing(0.5),
  display: 'flex',
  flexWrap: 'wrap',
  flexGrow: 1,
  gap: theme.spacing(1),
  '.MuiButton-root': {
    flexGrow: 1,
  },
}));

export default function NotificationBanner({
  severity,
  icon,
  onClose,
  buttons,
  children,
}: {
  severity?: AlertColor;
  icon?: ReactNode;
  onClose: () => void;
  buttons?: ReactNode;
  children?: ReactNode;
}): JSX.Element {
  const { t } = useTranslation();

  return (
    <NotificationBannerRoot
      severity={severity ?? 'success'}
      icon={icon ?? false}
      onClose={onClose}
      closeText={t<string>('banner.close')}
    >
      <NotificationBannerText>{children}</NotificationBannerText>
      {buttons && (
        <NotificationBannerButtons>{buttons}</NotificationBannerButtons>
      )}
    </NotificationBannerRoot>
  );
}

NotificationBanner.defaultProps = {
  severity: 'success',
  icon: false,
  buttons: undefined,
  children: undefined,
};