import { observer } from 'mobx-react-lite';
import { useMemo } from 'react';
import { deepCamelKeys } from 'string-ts';
import { twMerge } from 'tailwind-merge';

import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import AvatarTag from '@/components/tag/AvatarTag';
import { CommentIcon, PlayIcon, ThumbsDownIcon, ThumbsUpIcon } from '@/icons';
import { SMALL_IMAGE } from '@/utils/constants';
import { getCountString } from '@/utils/utils';

import SummaryOrFullTags from '../tag/SummaryOrFullTags';

export type OmniplayerClipMetadataProps = {
  clipId?: string;
};

export type Props = Omit<
  React.HTMLAttributes<HTMLDivElement>,
  keyof OmniplayerClipMetadataProps
> &
  OmniplayerClipMetadataProps;

const OmniplayerClipMetadata: React.FC<Props> = observer((props) => {
  const { className, clipId, ...restProps } = props;

  const { clips: clipsStore } = useStores();

  const clip = useMemo(
    () => (clipId ? deepCamelKeys(clipsStore.clipById[clipId]) : null),
    [clipId, clipsStore]
  );

  if (!clip) {
    return null;
  }

  return (
    <div
      className={twMerge('relative flex flex-col gap-2', className)}
      {...restProps}
    >
      <h2 className='font-sans text-lg font-medium'>{clip.title}</h2>
      <AvatarTag
        className='font-sans text-sm font-medium text-foreground-primary'
        displayName={clip.displayName || ''}
        handle={clip.handle || ''}
        imageUrl={clip.avatarImageUrl ?? undefined}
        imageSize={SMALL_IMAGE}
      />
      <SummaryOrFullTags
        tags={clip?.metadata.tags || undefined}
        negativeTags={clip.metadata.negativeTags || undefined}
        displayTags={clip.displayTags || undefined}
      />
      {clip.caption ? <p>{clip.caption}</p> : null}
      <div className='flex flex-row items-center justify-start gap-2'>
        <Button
          className='grow md:grow-0'
          variant={ButtonVariant.Primary}
          size={ButtonSize.Mini}
          shape={ButtonShape.Pill}
          active={false}
          icon={PlayIcon}
          iconClassName='mx-0'
          aspectSquare={false}
          href={undefined}
          // onClick={onPlayCountClick}
          aria-label='Play Count'
        >
          {clip.playCount != null && getCountString(clip.playCount, true)}
        </Button>
        <Button
          className='grow md:grow-0'
          variant={ButtonVariant.Primary}
          size={ButtonSize.Mini}
          shape={ButtonShape.Pill}
          active={false}
          icon={CommentIcon}
          iconClassName='mx-0'
          aspectSquare={false}
          href={undefined}
          // onClick={onCommentClick}
        >
          {clip.commentCount != null && getCountString(clip.commentCount, true)}
        </Button>
        <Button
          className='grow md:grow-0'
          variant={ButtonVariant.Primary}
          size={ButtonSize.Mini}
          shape={ButtonShape.Pill}
          active={clip.isLiked || false}
          icon={ThumbsUpIcon}
          iconClassName='mx-0'
          aspectSquare={false}
          href={undefined}
          // onClick={onLikeClick}
        >
          {clip.upvoteCount != null && getCountString(clip.upvoteCount, true)}
        </Button>
        <Button
          className='grow md:grow-0'
          variant={ButtonVariant.Primary}
          size={ButtonSize.Mini}
          shape={ButtonShape.Pill}
          active={clip.reaction?.reactionType === 'D' || false}
          icon={ThumbsDownIcon}
          iconClassName='mx-0'
          aspectSquare={false}
          href={undefined}
          // onClick={onDislikeClick}
        >
          {/* {dislikeCount && getCountString(dislikeCount)} */}
        </Button>
        {/* {songMenuButton} */}
      </div>
    </div>
  );
});

export default OmniplayerClipMetadata;