import React, { useEffect, useRef, useState } from 'react';
import { useSpring } from 'react-spring';
import { useTheme } from 'styled-components';
import { getImageSource } from '../../helpers/getImageSource';
import { usePrevious } from '../../hooks';
import AnimatedFavoriteIcon from '../../icons/AnimatedFavoriteIcon';
import { CommunityLibraryIcon } from '../../icons';
import CardHeaderContent from '../BoardCard/components/CardHeaderContent';
import FavoriteToast from '../FavoriteToast';
import TagsDisplayArea from '../TagsDisplayArea';
import Typography from '../Typography';
import { ITEM_THUMBNAIL_DEFAULT_URL } from './constants';
import { ItemCardProps } from './interfaces';
import {
  CardFooter,
  CardHeader,
  Divider,
  FavoriteButton,
  HoverDrawer,
  Row,
  StyledCard,
  ThumbnailWrapper,
  PendingTag,
} from './styles';
import { useGetElementSize } from '../../hooks/';

const ItemCard = (props: ItemCardProps) => {
  const theme = useTheme();
  const [hover, setHover] = useState<boolean>();
  const cardRef = useRef(null);
  const { width: cardWidth } = useGetElementSize(cardRef);
  const prevIsFavorite = usePrevious(props.isFavorite);
  const [showFavoriteToast, setShowFavoriteToast] = useState(false);
  const isCommunityItem = props.isCommunityItem !== false;
  const isPending = props.status === 'PENDING' || props.status === 'IN_REVIEW';

  const expand = useSpring({
    opacity: hover ? 1 : 0,
  });

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

  return (
    <StyledCard
      {...props}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      disableHoverState={props.disableHoverState}
      onClick={() => {}}
      ref={cardRef}
    >
      <CardHeader onClick={() => props.onClick?.()}>
        <CardHeaderContent
          title={props.title}
          username={props.username}
          avatarUrl={props.avatarUrl}
          showAvatar={props.showAvatar}
          onUsernameClick={props.onProfileLinkClick}
          headerButtonExists={false}
        />
      </CardHeader>
      <ThumbnailWrapper
        onClick={() => props.onClick?.()}
        minHeight={props.imageAreaMinHeight}
        maxHeight={props.imageAreaMaxHeight || 324}
        withPadding={Boolean(props.thumbnailUrl)}
      >
        {isPending && (
          <PendingTag>
            <CommunityLibraryIcon
              width={14}
              height={14}
              color={theme.colors.neutral[0]}
            />
            <Typography
              variant="utility2"
              color={theme.colors.neutral[0]}
              margin={[0, 0, 0, 4]}
            >
              Pending
            </Typography>
          </PendingTag>
        )}
        <img
          data-testid="thumbnail-image"
          src={getImageSource(
            props.thumbnailUrl || ITEM_THUMBNAIL_DEFAULT_URL,
            640
          )}
        />

        <FavoriteToast
          message="Added to Favorites"
          visable={showFavoriteToast}
          parentWidth={cardWidth}
        />

        {!props.disableHoverState && hover && (isCommunityItem || props.tags) && (
          <HoverDrawer style={expand}>
            {isCommunityItem && (
              <Row>
                <CommunityLibraryIcon
                  width={14}
                  height={14}
                  color={theme.colors.neutral[500]}
                />
                <Typography
                  variant="utility4"
                  color={theme.colors.neutral[500]}
                  margin={[0, 0, 0, 4]}
                >
                  Community Library
                </Typography>
              </Row>
            )}
            {props.tags && isCommunityItem && <Divider />}
            {props.tags && <TagsDisplayArea tags={props.tags} />}
          </HoverDrawer>
        )}
      </ThumbnailWrapper>
      <CardFooter>
        {props.showFavorite !== false && (
          <FavoriteButton onClick={props.onFavoriteClick}>
            <AnimatedFavoriteIcon active={Boolean(props.isFavorite)} />
            {Boolean(props.favoriteCount) && (
              <Typography
                variant={'p1'}
                color={theme.colors.neutral[800]}
                fontWeight={400}
              >
                {props.favoriteCount}
              </Typography>
            )}
          </FavoriteButton>
        )}
      </CardFooter>
    </StyledCard>
  );
};

export default ItemCard;