'use client';

import { Stack, Tooltip } from '@chakra-ui/react';
import clsx from 'clsx';
import { observer } from 'mobx-react-lite';
import React, { useEffect, useRef, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { ButtonSize, ButtonVariant } from '@/components/button/Button';
import { ClipLikeButton } from '@/components/button/ClipLikeButton';
import Button from '@/components/button/ReactAriaCompatButton';
import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import { GetFullSongButton } from '@/components/song/GetFullSongButton';
import { PublishButton } from '@/components/song/PublishButton';
import { SongMenuWithContext } from '@/components/song/newActions/SongMenuWithContext';
import { useModalContext } from '@/context/ModalContext';
import {
  BookmarkIcon,
  FeedbackIcon,
  PlayIcon,
  ShareArrowIcon,
  ThumbsDownIcon,
} from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { Clip, isDisliked, isLiked } from '@/state/clipStore';
import { shouldShowGetFullSong } from '@/utils/clip';
import { TOOLTIP_BACKGROUND } from '@/utils/constants';
import { isProjectsFeatureEnabled } from '@/utils/session';
import { getCountString } from '@/utils/utils';

import { shareClip } from '../../utils/download';

const MobileSongActions = observer(
  ({
    clip,
    showStats = false,
    trendingMode = false,
    isSongPage = false,
    onPinClipToProject,
    mini = false,
    enablePin = false,
  }: {
    clip: Clip;
    showStats?: boolean;
    trendingMode?: boolean;
    isSongPage?: boolean;
    onPinClipToProject?: () => void;
    mini?: boolean;
    enablePin?: boolean;
  }) => {
    const { playbar: playbarState, clips, session, project } = useStores();
    const { openModalWithData } = useModalContext();

    const [shouldPulse, setShouldPulse] = useState(false);
    const pulseTimerRef = useRef<NodeJS.Timeout | null>(null);

    const isLastCharNumber = (userId: string): boolean => {
      const lastChar = userId.charAt(userId.length - 1);
      return !isNaN(parseInt(lastChar, 10));
    };

    useEffect(() => {
      if (session.flags?.['thumbs-exp']) {
        if (
          playbarState.clip?.id === clip.id &&
          playbarState.isPlaying &&
          !isLiked(clip) &&
          !isDisliked(clip)
        ) {
          setShouldPulse(true);
          if (pulseTimerRef.current) {
            clearTimeout(pulseTimerRef.current);
          }
          pulseTimerRef.current = setTimeout(() => {
            setShouldPulse(false);
          }, 10000);
        } else {
          setShouldPulse(false);
          if (pulseTimerRef.current) {
            clearTimeout(pulseTimerRef.current);
          }
        }

        return () => {
          if (pulseTimerRef.current) {
            clearTimeout(pulseTimerRef.current);
          }
        };
      }
    }, [
      playbarState.clip?.id,
      playbarState.isPlaying,
      isLiked(clip),
      isDisliked(clip),
      clip.id,
    ]);

    const modalMenuTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
    useEffect(() => {
      return () => {
        clearTimeout(modalMenuTimeout.current);
      };
    }, []);

    return (
      <Stack spacing={0} direction='row' alignItems='center'>
        <Stack direction='row' spacing={0} alignItems='center'>
          {session.user?.id === clip.user_id &&
          !clip.is_trashed &&
          !isSongPage ? (
            shouldShowGetFullSong(clip, session?.user?.id) ? (
              <GetFullSongButton clip={clip} />
            ) : (
              <PublishButton clip={clip} />
            )
          ) : null}
          {trendingMode && !isSongPage ? (
            <Button
              variant={ButtonVariant.Tertiary}
              size={ButtonSize.Mini}
              icon={PlayIcon}
              onClick={() => playbarState.playClip(clip)}
              aria-label='Play Count'
              active={false}
            >
              {getCountString(clip.play_count || 0)}
            </Button>
          ) : null}
          {session?.flags?.['clip-feedback'] &&
            clip.user_id === session.userId &&
            !mini &&
            !isSongPage && (
              <Tooltip
                label={
                  clips.feedbackGivenByClipId[clip.id]
                    ? 'Feedback given, thank you!'
                    : 'Song feedback'
                }
                size='sm'
                background={TOOLTIP_BACKGROUND}
                backdropFilter='blur(40px)'
                rounded='md'
                color='#ffffff'
                padding='10px'
              >
                <Button
                  variant={ButtonVariant.Tertiary}
                  size={ButtonSize.Mini}
                  icon={FeedbackIcon}
                  iconClassName='w-8 h-8' // @TODO: Normalize icon size
                  onClick={() => {
                    openModalWithData(
                      ModalTypes.CLIP_FEEDBACK,
                      { clipId: clip.id },
                      'MobileSongActions'
                    );
                  }}
                  aria-label='Feedback Button'
                  active={!!clips.feedbackGivenByClipId[clip.id]}
                />
              </Tooltip>
            )}
          {!isSongPage && !mini && (
            <ClipLikeButton
              clipId={clip.id}
              showCount={showStats}
              variant={ButtonVariant.Tertiary}
              size={ButtonSize.Mini}
              iconClassName={clsx({
                'animate-pulse':
                  !isLastCharNumber(session.userId ?? '') && shouldPulse,
              })}
              onClick={({ isLiked }) => {
                logWebUserEvent({
                  actionName: 'SongActionLikeClicked',
                  principalObjectValue: clip?.id,
                  principalObjectType: 'song',
                  context: {
                    likeStatus: isLiked,
                  },
                });
              }}
              aria-label='Playbar: Like'
            />
          )}
          {!trendingMode && !isSongPage && !mini ? (
            <Button
              variant={ButtonVariant.Tertiary}
              size={ButtonSize.Mini}
              icon={ThumbsDownIcon}
              iconClassName={clsx({
                'animate-pulse':
                  !isLastCharNumber(session.userId ?? '') && shouldPulse,
              })}
              onClick={() => {
                const newStatus = !isDisliked(clip);
                clips.dislikeClip(clip.id, newStatus);
                logWebUserEvent({
                  actionName: 'SongActionDislikeClicked',
                  principalObjectValue: clip?.id,
                  principalObjectType: 'song',
                  context: {
                    dislikeStatus: newStatus,
                  },
                });
              }}
              aria-label='Playbar: Dislike'
              active={isDisliked(clip)}
            />
          ) : null}
        </Stack>
        {isProjectsFeatureEnabled(session) && enablePin && (
          <Button
            variant={ButtonVariant.Tertiary}
            size={ButtonSize.Mini}
            icon={<BookmarkIcon width={20} height={20} />}
            onClick={() => {
              onPinClipToProject?.();
            }}
            aria-label='Pin'
            active={project.isPinned(clip.id)}
          />
        )}

        {!isSongPage && !mini && (
          <>
            <Tooltip
              label='Copy Song Link'
              size='sm'
              background={TOOLTIP_BACKGROUND}
              backdropFilter='blur(40px)'
              rounded='md'
              color='#ffffff'
              padding='10px'
            >
              <Button
                variant={ButtonVariant.Tertiary}
                size={ButtonSize.Mini}
                icon={ShareArrowIcon}
                onClick={async () => {
                  logWebUserEvent({
                    actionName: 'SongActionShareClicked',
                    principalObjectValue: clip?.id,
                    principalObjectType: 'song',
                  });
                  await shareClip(clips.apiClient, clip);
                }}
                aria-label='Share'
                active={false}
              />
            </Tooltip>
          </>
        )}
        <SongMenuWithContext clip={clip} />
      </Stack>
    );
  }
);

export default MobileSongActions;