import React from 'react';
import { Hover, HoverStyle } from '../../helpers';

export interface YoutubeCounterButtonProps {
  position: string;
  number: string;
  tooltip: string;
  onClick: () => void;
  active: boolean;
  // TODO: not used, but would be cool
  // activeColor: string;
}

export const YoutubeCounterButton = React.forwardRef<
  HTMLDivElement,
  YoutubeCounterButtonProps
>(
  (
    {
      position,
      number,
      tooltip,
      onClick,
      active,
      // activeColor,
    },
    ref
  ) => {
    const iconStyle = React.useMemo(() => {
      return {
        background: `no-repeat url(//s.ytimg.com/yts/imgbin/www-hitchhiker-2x-vflaXbyPz.webp) ${position}`,
        backgroundSize: '573px 310px',
        width: '20px',
        height: '20px',
        marginRight: '6px',
      };
    }, [position]);

    return (
      <Hover
        ref={ref}
        hoverStyle={buttonStyleHover}
        style={{ ...buttonStyle, ...(active ? buttonStyleActive : {}) }}
        onClick={onClick}
      >
        <div style={iconStyle} />
        {parseInt(number, 10).toLocaleString()}
        <HoverStyle hoverStyle={tooltipStyleHover} style={tooltipStyle}>
          {tooltip}
        </HoverStyle>
      </Hover>
    );
  }
);

const buttonStyle: React.CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  fontFamily: 'Roboto,arial,sans-serif',
  fontSize: '11px',
  opacity: '0.5',
  cursor: 'pointer',
  position: 'relative',
};
const tooltipStyle: React.CSSProperties = {
  color: '#fff',
  background: 'rgba(0,0,0,0.8)',
  borderRadius: '3px',
  padding: '5px 8px',
  position: 'absolute',
  bottom: '100%',
  left: '50%',
  transform: 'translateX(-50%)',
  marginBottom: '4px',
  whiteSpace: 'nowrap',
  opacity: '0',
  transition: 'opacity 0.1s ease-in-out',
};
const buttonStyleHover = {
  opacity: '0.7',
};
const tooltipStyleHover = {
  opacity: '1',
};
const buttonStyleActive = {
  opacity: '1',
};

export default YoutubeCounterButton;