/*
 * 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 { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';

import type Service from '../../stores/Service';

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 ServiceIconBadge = styled(Badge, {
  name: 'ServiceIcon',
  slot: 'Badge',
})(({ theme }) => ({
  '.MuiBadge-dot': {
    background:
      theme.palette.mode === 'dark'
        ? theme.palette.text.primary
        : theme.palette.primary.light,
  },
}));

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

  // Hadge color histeresis for smooth appear / disappear animation.
  // If we compute hasDirectMessage = directMessageCount >= 1 directly (without any histeresis),
  // the badge momentarily turns light during the disappear animation.
  const [hasDirectMessage, setHasDirectMessage] = useState(false);
  useEffect(() => {
    if (directMessageCount >= 1) {
      setHasDirectMessage(true);
    } else if (indirectMessageCount >= 1) {
      setHasDirectMessage(false);
    }
  }, [directMessageCount, indirectMessageCount, setHasDirectMessage]);

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

export default observer(ServiceIcon);