/*
 * 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 Badge from '@mui/material/Badge';
import { styled, useTheme } from '@mui/material/styles';
import { Service } from '@sophie/shared';
import { observer } from 'mobx-react-lite';
import React from 'react';

const ServiceIconRoot = styled('div', {
  name: 'ServiceIcon',
  slot: 'Root',
})(({ theme }) => ({
  width: 36,
  height: 36,
  borderRadius: theme.shape.borderRadius,
  background: 'currentColor',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
}));

const ServiceIconText = styled('div', {
  name: 'ServiceIcon',
  slot: 'Text',
})(({ theme }) => ({
  display: 'inline-block',
  flex: 0,
  fontSize: theme.typography.pxToRem(24),
  color: theme.palette.primary.contrastText,
}));

const IndirectMessageBadge = styled(Badge)(({ theme }) => ({
  '& .MuiBadge-dot': {
    // The indirect message badge floats ouside the icon in the middle.
    top: '50%',
    ...(theme.direction === 'ltr'
      ? {
          left: theme.spacing(-1),
        }
      : {
          right: theme.spacing(-1),
        }),
    background:
      theme.palette.mode === 'dark'
        ? theme.palette.text.primary
        : 'currentColor',
  },
}));

const DirectMessageBadge = styled(Badge)(({ theme }) => ({
  '& .MuiBadge-badge': {
    // Move the badge closer to the icon so that even "99+" messages can fit in the sidebar.
    ...(theme.direction === 'ltr'
      ? {
          right: theme.spacing(0.25),
        }
      : {
          left: theme.spacing(0.25),
        }),
    top: theme.spacing(0.25),
    // Set the badge apart from the icon with a shadow (a border would be too heavy).
    boxShadow: theme.shadows[1],
    // Add a bit more emphasis to the badge.
    fontWeight: 700,
  },
}));

function ServiceIcon({ service }: { service: Service }): JSX.Element {
  const { direction } = useTheme();
  const {
    settings: { name },
    directMessageCount,
    indirectMessageCount,
  } = service;

  return (
    <IndirectMessageBadge
      badgeContent={indirectMessageCount}
      variant="dot"
      anchorOrigin={{
        vertical: 'top',
        horizontal: direction === 'ltr' ? 'left' : 'right',
      }}
    >
      <DirectMessageBadge
        badgeContent={directMessageCount}
        color="error"
        anchorOrigin={{
          vertical: 'top',
          horizontal: direction === 'ltr' ? 'right' : 'left',
        }}
      >
        <ServiceIconRoot>
          <ServiceIconText>{name.length > 0 ? name[0] : '?'}</ServiceIconText>
        </ServiceIconRoot>
      </DirectMessageBadge>
    </IndirectMessageBadge>
  );
}

export default observer(ServiceIcon);