import React, { useEffect, useState } from 'react';
import { useTheme } from 'styled-components';
import { CommunityLibraryIcon } from '../../icons';
import { getImageSource } from '../../helpers/getImageSource';
import { usePrevious } from '../../hooks';
import FavoriteButton from '../FavoriteButton';
import FavoriteToast from '../FavoriteToast';
import Typography from '../Typography';
import UserAvatar from '../UserAvatar';
import { AssetDataCardProps, AssetDataCardVariant } from './interfaces';
import {
  Wrapper,
  Row,
  Description,
  AssetPreviewContainer,
  Column,
  CommunityLibraryHeader,
  CommunityLibraryIconWrapper,
} from './styles';
import LinkBadge from '../LinkBadge';

const AssetDataCard = ({
  title,
  addedBy,
  variant,
  description,
  link,
  thumbnailUrl,
  isFavorite,
  onFavoriteClick,
  isCommunityItem,
  onLinkClick,
  onProfileLinkClick,
  showFavorite = true,
  favoriteCount,
}: AssetDataCardProps) => {
  const theme = useTheme();
  const prevIsFavorite = usePrevious(isFavorite);
  const [showFavoriteToast, setShowFavoriteToast] = useState(false);
  const isCondensed = variant === AssetDataCardVariant.CONDENSED;

  useEffect(() => {
    if (isFavorite && prevIsFavorite === false) {
      // show favorite toast for 3 seconds
      setShowFavoriteToast(true);
      setTimeout(() => {
        setShowFavoriteToast(false);
      }, 3000);
    }
  }, [isFavorite]);

  const hasLink = Boolean(link?.length);
  const hasTitle = Boolean(title?.length);

  return (
    <Wrapper
      variant={variant}
      href={link}
      target="_blank"
      as={hasLink && !isCondensed ? 'a' : 'div'}
      onClick={() => hasLink && onLinkClick?.()}
      hasLink={hasLink}
    >
      {!isCondensed && thumbnailUrl && (
        <AssetPreviewContainer>
          <img src={getImageSource(thumbnailUrl, 500)} />
          {showFavorite && (
            <FavoriteButton
              active={Boolean(isFavorite)}
              favoriteCount={favoriteCount}
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                onFavoriteClick?.();
              }}
            />
          )}
          <FavoriteToast
            message="Added to Favorites"
            visable={showFavoriteToast}
          />
        </AssetPreviewContainer>
      )}

      {isCondensed && showFavorite && (
        <>
          <FavoriteButton
            active={Boolean(isFavorite)}
            favoriteCount={favoriteCount}
            size="small"
            disabled
            top={16}
            right={24}
          />
          {!hasTitle && !hasLink && (
            // placeholder row for favorite indicator because button has an absolute position
            // only needed if there is no title & no link
            <div style={{ height: 24 }} />
          )}
        </>
      )}

      {isCondensed && !showFavorite && isCommunityItem && (
        <CommunityLibraryHeader>
          <CommunityLibraryIconWrapper>
            <CommunityLibraryIcon color={theme.colors.neutral[500]} />
          </CommunityLibraryIconWrapper>
          <Typography variant="p2" color={theme.colors.neutral[500]}>
            Community Library
          </Typography>
        </CommunityLibraryHeader>
      )}

      {(hasTitle || hasLink) && (
        <Column
          gap={8}
          margin="0 0 0 8px"
          align={isCondensed && !hasTitle && !showFavorite ? 'right' : 'left'}
        >
          {hasTitle && (
            <Typography
              variant="h4"
              fontWeight={400}
              maxWidth={isCondensed ? 324 : undefined}
            >
              {title}
            </Typography>
          )}

          {hasLink && <LinkBadge link={link} />}
        </Column>
      )}

      {description && (
        <Description>
          <Typography variant="p2" margin={[0, 0, 16, 0]}>
            {description.content}
          </Typography>
          <Row justifyContent="start">
            <UserAvatar
              size={16}
              username={description.username}
              avatarUrl={
                description.avatarUrl?.length
                  ? getImageSource(description.avatarUrl, 240)
                  : undefined
              }
            />
            <div onClick={() => onProfileLinkClick?.(description.username)}>
              <Typography variant="utility3" margin={[0, 0, 0, 4]}>
                @{description.username}
              </Typography>
            </div>
          </Row>
        </Description>
      )}

      <Typography
        variant="utility3"
        color={theme.colors.neutral[600]}
        margin={[0, 0, 0, 8]}
      >
        Item Added by{' '}
        <span
          style={{ color: theme.colors.neutral[900] }}
          onClick={() => onProfileLinkClick?.(addedBy)}
        >
          @{addedBy}
        </span>
      </Typography>
    </Wrapper>
  );
};

export default AssetDataCard;