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

import Image from '@material-hu/components/composed-components/Image';
import SeeMoreText from '@material-hu/components/composed-components/SeeMoreText';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import Title from '@material-hu/components/design-system/Title';

import defaultLibraryCover from 'src/assets/defaultLibraryCover.webp';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useLibrariesTitle } from '../../hooks/useLibrariesTitle';
import { type LibraryHomeConfig } from '../../types';

type LibraryHomeHeroCardProps = {
  config: LibraryHomeConfig;
  onEdit?: () => void;
};

export const LibraryHomeHeroCard = ({
  config,
  onEdit,
}: LibraryHomeHeroCardProps) => {
  const theme = useTheme();
  const { t } = useLokaliseTranslation('libraries');
  const title = useLibrariesTitle();

  const imageSrc = config.imageUrl || defaultLibraryCover;

  const description = !config.description?.trim()
    ? t('welcome.default_message.admin')
    : config.description;

  return (
    <CardContainer
      fullWidth
      padding={0}
    >
      <Image
        alt=""
        aspectRatio="4/1"
        defaultSrc={defaultLibraryCover}
        src={imageSrc}
        sx={{
          width: '100%',
          display: 'block',
          objectFit: 'cover',
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0,
          borderTopLeftRadius: theme.shape.borderRadiusM,
          borderTopRightRadius: theme.shape.borderRadiusM,
          ...(!config.imageUrl && {
            backgroundColor: theme.palette.new.background.elements.grey,
          }),
        }}
      />
      <Stack
        sx={{
          alignItems: 'flex-start',
          flexDirection: 'row',
          gap: 2,
          justifyContent: 'space-between',
          px: 3,
          py: 2,
        }}
      >
        <Stack sx={{ flex: 1, minWidth: 0 }}>
          <Title
            fontWeight="fontWeightSemiBold"
            sx={{ minWidth: 0 }}
            title={title}
            variant="M"
          />
          <SeeMoreText
            text={description}
            lines={5}
            buttonSx={{
              '&:hover': {
                backgroundColor: 'transparent',
                textDecoration: 'none',
              },
            }}
          />
        </Stack>
        <IconButton
          aria-label={t('general:edit')}
          onClick={onEdit}
          variant="secondary"
          sx={{ flexShrink: 0 }}
        >
          <IconPencil size={16} />
        </IconButton>
      </Stack>
    </CardContainer>
  );
};