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

import { IconChevronRight } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

import { IconType } from 'src/types/icons';
import { LibrarySearchListItem, LibraryStatus } from 'src/types/library';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { librariesRoutes } from '../routes';

import Breadcrumbs from './Breadcrumbs';

export type LibrarySearchItemProps = {
  library?: LibrarySearchListItem;
  loading?: boolean;
};

export const LibrarySearchItem = ({
  library,
  loading = false,
}: LibrarySearchItemProps) => {
  const { t } = useLokaliseTranslation('general');
  const navigate = useNavigate();
  const theme = useTheme();

  const handleSelect = () => navigate(librariesRoutes.library(library.id));

  const breadcrumbItems = library
    ? [
        ...library.parentTree,
        {
          id: library.id,
          title: library.title,
        },
      ]
    : [];

  return (
    <HuCardContainer
      sx={{
        width: '100%',
        p: 3,
        '& > .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'column',
          gap: 3,
          p: 0,
        },
        '& .back-highlights': {
          backgroundColor: theme.palette.border.primaryBorder,
        },
      }}
    >
      {!loading && library && (
        <>
          <Stack>
            <HuListItem
              avatar={{
                src:
                  library.icon.type === IconType.IMAGE
                    ? library.icon.value
                    : undefined,
                text:
                  library.icon.type === IconType.EMOJI
                    ? library.icon.value
                    : undefined,
                alt: '',
                withBadge: true,
                badgeProps: {
                  color:
                    library.status === LibraryStatus.ENABLED
                      ? 'success'
                      : 'disabled',
                },
              }}
              text={{
                title: (
                  <div
                    dangerouslySetInnerHTML={{
                      __html: library.highlights.title[0] || library.title,
                    }}
                  />
                ),
              }}
              action={{
                onClick: handleSelect,
                'aria-label': `${t('general:select')} ${library.title}`,
                Icon: IconChevronRight,
              }}
              sx={{
                '& .MuiListItem-root': {
                  p: 0,
                },
                '& .MuiAvatar-root': {
                  '& .MuiAvatar-img': {
                    p: 1,
                  },
                  '& .MuiTypography-root': {
                    fontSize: '20px',
                  },
                },
              }}
            />
            <Breadcrumbs
              items={breadcrumbItems}
              sx={{
                ml: '48px',
              }}
            />
          </Stack>
          {library.textContent && (
            <Typography
              variant="globalS"
              sx={{
                display: '-webkit-box',
                WebkitLineClamp: 2,
                WebkitBoxOrient: 'vertical',
                maxHeight: '44px',
                overflow: 'hidden',
                whiteSpace: 'normal',
                overflowWrap: 'break-word',
              }}
              dangerouslySetInnerHTML={{
                __html:
                  library.highlights.textContent[0] || library.textContent,
              }}
            />
          )}
        </>
      )}
      {loading && (
        <>
          <HuListItem loading />
          <HuSkeleton
            width="100%"
            height={44}
          />
        </>
      )}
    </HuCardContainer>
  );
};

export default LibrarySearchItem;