import * as React from 'react';
import { FC, useContext } from 'react';  
import { style } from 'typestyle';
import { IMedia } from '../../../../../types';
import { onKeyDownEventCallback } from '../../../../../utils/onKeyDown';
import Mute from '../../../../Icons/MuteUnmute/Mute';
import Unmute from '../../../../Icons/MuteUnmute/Unmute';
import ShoppingBag from '../../../../Icons/ShoppingBag';
import Pause from '../../../../Icons/PlayPause/Pause';
import Play from '../../../../Icons/PlayPause/Play';
import CloseBold from '../../../../Icons/CloseBold';
import { StoreContext } from '../../../../../services/store';
import Packshot from '../../../../Packshot';
import { mobilePlayerPackshotHeightPercent, pillActiveBackgroundColor, pillBackgroundColor, pillFontColor } from '../../../../consts';

interface ControlsProps {
  post: IMedia;
  showList: boolean;
  onClose: () => void;
  toggleList: () => void;
  isMuted: boolean;
  isPlaying: boolean;
  toggleMute: () => void;
  togglePlay: () => void;
   renderMode?: 'mobile' | 'desktop';
}

const Controls: FC<ControlsProps> = ({ 
  post, 
  showList, 
  onClose, 
  toggleList,
  isMuted,
  isPlaying,
  toggleMute,
  togglePlay,
  renderMode = 'mobile',
}) => {
  const context = useContext(StoreContext);
  const { config, data } = context;
  const isVideo = post.type === 'video';
  const isForceMuted = post.isMuted === true;
  
  const productButtonSetting = data.settings?.mobile_player_product_cta || 'packshot';
  const postProducts = post.products || [];

  const renderProductInteraction = () => {
    if (showList) {
      return null;
    }

    switch (productButtonSetting) {
      case 'packshot':
        return (
          <Packshot
            products={postProducts}
            shape={data.settings.thumbnail_shape || 'square'}
            cornerType={data.settings.thumbnail_corners || 'round'}
            heightPercentage={mobilePlayerPackshotHeightPercent}
            onContainerClick={toggleList}
          />
        );
      case 'button':
        return (
          <div className={styles.bottomCenter}>
            <button 
              className={`${pillButtonClass} ${buttonClass} ${styles.shopButton}`}
              onClick={toggleList}
              onKeyDown={(e) => onKeyDownEventCallback(e, toggleList)}
              aria-label="Show products"
            >
              {data.settings?.shop_this_look_text ?? config.shopThisLookText ?? 'SHOP THIS LOOK'} <ShoppingBag color="white" size={20} />
            </button>
          </div>
        );
      case 'none':
      default:
        return null;
    }
  };

  return (
    <>
      <div className={renderMode === 'desktop' ? styles.topRightDesktop : styles.topRight}>
        {isVideo ? (
          <>
            {!isForceMuted ? (
              <button 
                className={`${roundButtonClass} ${buttonClass}`}
                onClick={toggleMute}
                onKeyDown={(e) => onKeyDownEventCallback(e, toggleMute)}
                aria-label={isMuted ? 'Unmute' : 'Mute'}
              >
                {isMuted ? 
                  <Mute color="white" size={24} /> : 
                  <Unmute color="white" size={24} />
                }
              </button>
            ) : null}
            
            <button 
              className={`${roundButtonClass} ${buttonClass}`}
              onClick={togglePlay}
              onKeyDown={(e) => onKeyDownEventCallback(e, togglePlay)}
              aria-label={isPlaying ? 'Pause' : 'Play'}
            >
              {isPlaying ? 
                <Pause color="white" size={20} /> : 
                <Play color="white" size={20} />
              }
            </button>
          </>
        ) : null}
        
        {renderMode !== 'desktop' ? (
          <button 
            className={`${roundButtonClass} ${buttonClass}`}
            onClick={onClose}
            onKeyDown={(e) => onKeyDownEventCallback(e, onClose)}
            aria-label="Close"
          >
            <CloseBold color="white" size={20} />
          </button>
        ) : null}
      </div>

      {renderProductInteraction()}
    </>
  );
};

export default Controls;

const styles = {
    topLeft: style({
        position: 'absolute',
        top: 20,
        left: 20,
        zIndex: 10,
      }),
      
      topRight: style({
        position: 'absolute',
        top: 20,
        right: 20,
        zIndex: 10,
        display: 'flex',
        gap: '12px',
      }),

      topRightDesktop: style({
        display: 'flex',
        flexDirection: 'column',
        gap: '12px',
      }),
      
      bottomCenter: style({
        position: 'absolute',
        bottom: 20,
        left: '50%',
        transform: 'translateX(-50%)',
        width: '90%',
        zIndex: 10,
        display: 'flex',
        justifyContent: 'center',
      }),

      shopButton: style({
        width: '100%',
        justifyContent: 'center',
        gap: '8px',
      }),
      
      hidden: style({
        display: 'none',
      }),
}

const buttonClass = style({
  backgroundColor:  pillBackgroundColor,
  backdropFilter: 'blur(3px)',
  '-webkit-backdrop-filter': 'blur(3px)',
  color: pillFontColor,
  border: 'none',
  cursor: 'pointer',
  outline: 'none',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  $nest: {
    '&:active': {
      backgroundColor:  pillActiveBackgroundColor,
    },
    '&:focus-visible': {
      outline: '2px solid white',
      outlineOffset: '2px',
    },
  },
})

const roundButtonClass = style({
  padding: '5px',
  borderRadius: '50%',
  height: '40px',
  width: '40px',

});

const pillButtonClass = style({
  padding: '10px 12px',
  borderRadius: '99px',
  fontSize: '14px',
  fontFamily: "'Fustat', sans-serif",
  fontWeight: 300,
  border: `1px solid ${pillFontColor}`,
});
