import { styled } from '../Theme';

const ActionButton = styled('div')`
  background-color: transparent !important;
  & > :not(.Mui-disabled) {
    position: relative;
    z-index: 1;
    &::before {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      transition: opacity 0.3s;
    }
    &:hover::before {
      opacity: 0;
    }
    &::after {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      border-radius: 2px;
      background-color: ${(props) => props.theme.palette.primary.main};
      transform: scale(0.1);
      opacity: 0;
      z-index: -1;
      transition:
        transform 0.3s,
        opacity 0.3s,
        background-color 0.3s;
    }
    &:hover::after {
      opacity: 1;
      transform-origin: center;
      transform: scale(1);
    }
  }
  & > :not(.Mui-disabled) {
    background-color: transparent !important;
    color: ${(props) => props.theme.palette.primary.main}!important;
  }
  & > :not(.Mui-disabled) {
    &:hover {
      color: ${(props) => props.theme.palette.common.white}!important;
    }
  }
`;

export default ActionButton;

export const strippedString = (originalString = '') => {
  return originalString.replace(/(<([^>]+)>)/gi, '').trim();
};

export const formatDownloadCount = (num = '') => {
  const n = parseInt(num, 10);
  if (Number.isNaN(n)) {
    return num;
  }
  if (n < 1000) {
    return n;
  }
  if (n < 1000000) {
    return `${(n / 1000).toFixed(1)}k`;
  }
  if (n < 1000000000) {
    return `${(n / 1000000).toFixed(1)}m`;
  }
  return `${(n / 1000000000).toFixed(1)}b`;
};
