import { useNavigate } from 'react-router-dom';

import { useTheme } from '@material-hu/mui/index';
import { IconType } from '@material-hu/types/icons';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import List from '@material-hu/components/design-system/List';
import ListItem from '@material-hu/components/design-system/List/components/ListItem';
import {
  type ListItemAvatarProps,
  type ListItemTextProps,
} from '@material-hu/components/design-system/List/components/ListItem/types';
import Title from '@material-hu/components/design-system/Title';

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

import { useArticleId } from '../../hooks/useArticleId';
import { huLibrariesRoutes } from '../../routes';
import { type Article, ArticleStatus } from '../../types';

type ArticleChildrenProps = {
  subArticles: Article[] | null;
  isEditor: boolean;
};

export const ArticleChildren = ({
  subArticles,
  isEditor,
}: ArticleChildrenProps) => {
  const { t } = useLokaliseTranslation('libraries');
  const navigate = useNavigate();
  const theme = useTheme();
  const { rootId } = useArticleId();

  const visibleSubArticles = isEditor
    ? subArticles
    : subArticles?.filter(a => a.status === ArticleStatus.ENABLED);

  if (!visibleSubArticles?.length) return null;

  const handleClick = (subArticleId: number) => {
    if (rootId) {
      navigate(huLibrariesRoutes.article(rootId, subArticleId));
    }
  };

  const getArticleAvatar = (subArticle: Article): ListItemAvatarProps => {
    const isImageType = subArticle.icon.type === IconType.IMAGE;
    const isEmojiType = subArticle.icon.type === IconType.EMOJI;
    const isActive = subArticle.status === ArticleStatus.ENABLED;

    return {
      src: isImageType ? subArticle.icon.value : undefined,
      text: isEmojiType ? subArticle.icon.value : undefined,
      alt: subArticle.title,
      variant: 'square',
      withBadge: isEditor,
      badgeProps: isEditor
        ? { color: isActive ? 'success' : 'disabled' }
        : undefined,
    };
  };

  const getArticleText = (subArticle: Article): ListItemTextProps => {
    const childrenCount = subArticle.children?.length;

    return {
      title: subArticle.title,
      overflow: 'tooltip',
      withEllipsis: true,
      description: childrenCount
        ? `${childrenCount} ${t('subarticle.title', { count: childrenCount })}`
        : undefined,
    };
  };

  const sortedSubArticles = [...visibleSubArticles].sort(
    (a, b) => (a.position ?? 0) - (b.position ?? 0),
  );

  return (
    <CardContainer fullWidth>
      <Title
        variant="S"
        fontWeight="fontWeightSemiBold"
        title={t('subarticle.title', { count: sortedSubArticles.length })}
        sx={{ mb: 2 }}
      />
      <List>
        {sortedSubArticles.map(subArticle => (
          <ListItem
            onClick={() => handleClick(subArticle.id)}
            key={subArticle.id}
            text={getArticleText(subArticle)}
            avatar={getArticleAvatar(subArticle)}
            sx={{ mb: 1 }}
            slotProps={{
              container: {
                sx: {
                  cursor: 'pointer',
                  borderRadius: 2,
                  border: `1px solid ${theme.palette.new.border.neutral.divider}`,
                },
              },
              avatar: {
                sx: {
                  '& img': { width: '24px', height: '24px' },
                  '& span': { fontSize: '1.5rem' },
                },
              },
            }}
          />
        ))}
      </List>
    </CardContainer>
  );
};