import {
  IconBellOff,
  IconChevronRight,
  type TablerIcon,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

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

import { moduleIcons, type NotificationModuleCodes } from '../constants';
import { type ChannelPreferences } from '../types';
import { getChannelDescription } from '../utils';

type NotificationModuleCardProps = {
  moduleName: NotificationModuleCodes;
  channelsPreferences: ChannelPreferences;
  isLoading: boolean;
  onSelect: (moduleName: NotificationModuleCodes) => void;
};

const NotificationModuleCard = (props: NotificationModuleCardProps) => {
  const { moduleName, channelsPreferences, isLoading, onSelect } = props;

  const { t } = useLokaliseTranslation(['notifications_center', 'general']);

  const Icon = moduleIcons[moduleName] as TablerIcon;

  const isMuted = Object.values(channelsPreferences).every(
    channelEnabled => !channelEnabled,
  );

  return (
    <Stack sx={{ width: '100%', gap: 2 }}>
      <HuCardContainer
        sx={{
          width: '100%',
        }}
        onClick={() => onSelect(moduleName)}
      >
        <HuListItem
          loading={isLoading}
          slotProps={{
            avatar: {
              sx: { mr: 1 },
            },
          }}
          sx={{
            '& .MuiListItem-root': { p: 0, m: 0 },
          }}
          avatar={{
            Icon: Icon,
            color: 'primary',
          }}
          text={{
            title: t(`modules.${moduleName.toLowerCase()}`),
            description: getChannelDescription(
              channelsPreferences,
              moduleName,
              t,
            ),
          }}
          sideContent={
            <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
              {isMuted && <IconBellOff fontSize="small" />}
              <IconChevronRight fontSize="small" />
            </Stack>
          }
        />
      </HuCardContainer>
    </Stack>
  );
};

export default NotificationModuleCard;