import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';
import { useCallback } from 'react';

import {
  CommentIcon,
  PauseIcon,
  PlayIcon,
  ShareArrowIcon,
  ThumbsUpIcon,
} from '@/icons';
import { isLiked } from '@/state/clipStore';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '../button/Button';
import CountButton from '../button/CountButton';
import { useNullableClipContext } from '../clipBrowser/ClipContext';
import useClipChanges from '../clipBrowser/useClipChanges';
import { useClipPlaybackContext } from '../clipBrowser/useClipPlayback';
import useShareClip from '../clipBrowser/useShareClip';

const InteractionRow = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 4px;
`;

export default observer(function ClipInteractionRow() {
  const clip = useNullableClipContext();
  const { isPlaying, willPlay, onPlayClick } = useClipPlaybackContext();
  const { setClipLiked } = useClipChanges();
  const shareClip = useShareClip();

  const handleLikeClick = useCallback(() => {
    if (clip) setClipLiked(clip.id, !isLiked(clip));
  }, [clip?.id, setClipLiked, clip && isLiked(clip)]);

  const handleShareClick = useCallback(() => {
    if (clip) shareClip(clip);
  }, [clip, shareClip]);

  return (
    <InteractionRow>
      <CountButton
        disabled={!clip}
        variant={ButtonVariant.Primary}
        active={isPlaying || willPlay}
        onMouseDown={onPlayClick}
        count={clip?.play_count || 0}
        className='py-1'
        icon={
          isPlaying || willPlay ? (
            <PauseIcon className='h-4 w-4' />
          ) : (
            <PlayIcon className='h-4 w-4' />
          )
        }
        itemId={clip?.id || 'loading'}
      />

      <CountButton
        variant={ButtonVariant.Primary}
        disabled={!clip}
        active={clip && isLiked(clip)}
        onMouseDown={handleLikeClick}
        count={clip?.upvote_count || 0}
        className='py-1'
        icon={<ThumbsUpIcon className='h-4 w-4' />}
        itemId={clip?.id || 'loading'}
      />
      <CountButton
        disabled={!clip?.allow_comments}
        href={clip ? `/song/${clip.id}?show_comments=true` : '/'}
        target='_blank'
        className='py-1'
        icon={<CommentIcon className='h-4 w-4' />}
        itemId={clip?.id || 'loading'}
        count={clip?.comment_count || 0}
      />
      <Button
        disabled={!clip}
        size={ButtonSize.Mini}
        shape={ButtonShape.Pill}
        className='h-8 w-8 p-2'
        icon={<ShareArrowIcon className='h-4 w-4' />}
        onClick={handleShareClick}
      />
    </InteractionRow>
  );
});