import * as React from 'react';
import { FC } from 'react';
import { style } from 'typestyle';
import { IMedia } from '../../types';
import Mute from '../Icons/MuteUnmute/Mute';
import Unmute from '../Icons/MuteUnmute/Unmute';
import UserName from '../UserName';
import AttributionLogo from '../Icons/AttributionLogo';
import { pillZIndex, topPillsMarginTopPx } from '../consts';

export interface ThumbnailPillsProps {
  post: IMedia;
  /** Whether to show the mute/unmute button (only meaningful when a video is playing) */
  showMute: boolean;
  isMuted: boolean;
  onMuteToggle: () => void;
  /** Whether to show the username pill */
  showUsername: boolean;
  /** Whether to show the attribution logo */
  showAttribution: boolean;
  isMobile: boolean;
  /**
   * When true the username text is hidden and only the social-network icon is shown.
   * Defaults to false.
   */
  hideUsername?: boolean;
  /**
   * Adds `${classPrefix}-thumbnail-pill` to the mute button for public BEM targeting.
   * Omit when rendering in a portal clone (no classPrefix needed there).
   */
  classPrefix?: string;
  /**
   * When false the username starts fully visible (no opacity transition).
   * Defaults to true — username starts at opacity 0 and fades in on hover.
   */
  showUsernameTransition?: boolean;
}

/**
 * Overlay pills rendered on top of a thumbnail (or its portal clone):
 *   • Mute/Unmute button  – top-left  (video only)
 *   • Username pill       – top-right (revealed on hover via parent CSS)
 *   • Attribution logo    – bottom-left
 *
 * The parent container must be `position: relative/absolute/fixed` and carry
 * the `&:hover .username { opacity: 1 }` rule (use `thumbnailPillsHoverClass`).
 */
const ThumbnailPills: FC<ThumbnailPillsProps> = ({
  post,
  showMute,
  isMuted,
  onMuteToggle,
  showUsername,
  showAttribution,
  isMobile,
  hideUsername = false,
  classPrefix,
  showUsernameTransition = true,
}) => {
  return (
    <>
      {showMute ? (
        <button
          type='button'
          onClick={(e) => {
            e.stopPropagation();
            onMuteToggle();
          }}
          className={[
            muteButtonClass,
            classPrefix ? `${classPrefix}-thumbnail-pill` : '',
          ]
            .filter(Boolean)
            .join(' ')}
          aria-label={isMuted ? 'Unmute preview video' : 'Mute preview video'}
        >
          <span style={{ display: 'flex', alignItems: 'center' }}>
            {isMuted ? (
              <Mute color='#ffffff' size={22} />
            ) : (
              <Unmute color='#ffffff' size={22} />
            )}
          </span>
        </button>
      ) : null }

      {showUsername && post.username ? (
        <div
          data-username={post.username}
          className={[
            usernameClass(showUsernameTransition),
            classPrefix ? `${classPrefix}-thumbnail-pill` : '',
          ]
            .filter(Boolean)
            .join(' ')}
        >
          <UserName
            color='#ffffff'
            username={post.username}
            source={post.source}
            postUrl={post.post}
            hideUsername={hideUsername}
          />
        </div>
      ) : null }

      {showAttribution ? (
        <div className={watermarkClass}>
          <AttributionLogo color='rgba(255, 255, 255, 0.9)' size={isMobile ? 12 : 20} />
        </div>
      ) : null }
    </>
  );
};

const muteButtonClass = style({
    position: 'absolute',
    top: `${topPillsMarginTopPx}px`,
    left: '10px',
    zIndex: pillZIndex,
    backgroundColor: 'rgba(0, 0, 0, 0.03)',
    backdropFilter: 'blur(3px)',
    '-webkit-backdrop-filter': 'blur(3px)',
    padding: '4px 10px',
    borderRadius: '99px',
    color: '#ffffff',
    border: 'none',
    cursor: 'pointer',
    fontSize: '12px',
    fontFamily: "'Fustat', sans-serif",
    display: 'flex',
    alignItems: 'center',
    gap: '5px',
  });

const usernameClass = (showTransition: boolean) =>
  `${style({
    position: 'absolute',
    zIndex: pillZIndex,
    top: topPillsMarginTopPx,
    right: 5,
    textDecoration: 'none',
    color: '#ffffff',
    backgroundColor: 'rgba(0, 0, 0, 0.03)',
    backdropFilter: 'blur(3px)',
    '-webkit-backdrop-filter': 'blur(3px)',
    borderRadius: '99px',
    ...(showTransition ? { opacity: 0, transition: 'opacity 0.2s ease' } : {}),
  })} username`; // `.username` is targeted by parent hover CSS

const watermarkClass = style({
  position: 'absolute',
  bottom: 3,
  left: 5,
  zIndex: pillZIndex,
  opacity: 0.6,
});

/**
 * Apply this class to the container that wraps ThumbnailPills to enable the
 * username hover reveal.  The `.username` selector is the stable hook used
 * across Thumbnail and its portal clone.
 */
export const thumbnailPillsHoverClass = style({
  $nest: {
    '&:hover .username': { opacity: 1 },
  },
});

export default ThumbnailPills;