import React, { useState } from 'react';
import styled from 'styled-components';

import v from '../../styles/Variables';

interface Props {
  backgroundHover?: string;
  callback: () => void;
  fontHover?: string;
  isActive?: boolean;
  radius?: number;
  title: string;
  tooltip: boolean;
  themeClass?: string;
  srText: string;
}

interface ButtonStyles {
  backgroundHover: string;
  fontHover: string;
  radius?: number;
}

const IconButton = ({ tooltip = false, callback, radius = 45, themeClass, title, backgroundHover = '#000', fontHover = '#fff', isActive = false, srText }: Props) => {
  const [showTooltip, showTooltipSetter] = useState(false);

  return (
    <ButtonWrap
      type="button"
      onClick={() => callback()}
      onMouseEnter={() => showTooltipSetter(true)}
      onMouseLeave={() => showTooltipSetter(false)}
      className={`IconButton border--none bg--offLight radius--lg text--center font--dark888 animate position--relative ${themeClass} ${isActive === true ? 'active' : null}`}
      radius={radius}
      backgroundHover={backgroundHover}
      fontHover={fontHover}
      aria-pressed={isActive}
    >
      {title}
      <span
        className={showTooltip === true && tooltip === true ? 'bg--dark position--absolute font--12 padding--sm lh--sm block no--wrap' : 'sr-only'}
        style={{
          top: '102%',
          width: 125,
          left: -55,
        }}
      >
        &nbsp;&nbsp;&nbsp;{srText}&nbsp;&nbsp;&nbsp;
      </span>
    </ButtonWrap>
  );
};

export default IconButton;

/* styles */
const ButtonWrap = styled.button<ButtonStyles>`
  display: inline-block;
  width: ${({ radius }) => `${radius}px`};
  height: ${({ radius }) => `${radius}px`};
  // overflow: hidden;
  line-height: ${({ radius }) => `${radius}px`};
  transition: ${v.animate};

  &:hover,
  &.active {
    background: ${({ backgroundHover }) => `${backgroundHover} !important`};
    color: ${({ fontHover }) => `${fontHover} !important`};
  }
`;