import React, { useCallback } from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { textSize } from 'Themes/utils/fontPickers';
import { screenSize } from 'Themes/utils/mediaQueries';
import { BaseCardItem } from '../cardItem';
import { BaseStyledHeader } from '../cardItemHeader';

export const PremiumHeader = styled(BaseStyledHeader)`
  display: none;

  @media ${screenSize('desktop')} {
    display: inline;
    flex-basis: 13%;
  }
`;

const StyledPremium = styled(BaseCardItem)`
  display: none;
  position: relative;
  flex-basis: 13%;

  @media ${screenSize('desktop')} {
    display: block;
  }
`;

const WholePart = styled.span`
  font-weight: bold;
  font-size: ${textSize('XXXL')};
`;

const DecimalPart = styled.span`
  position: absolute;
  font-size: ${textSize('M')};
  margin-left: 4px;
`;

const getWholeNumber = value => `$${Math.floor(value)}`;

const getDecimalNumber = value => `${Math.round((value % 1) * 100)}`;

export const PremiumContent = ({ premium }) => {
  const getWholePart = useCallback(getWholeNumber, [premium]);
  const getDecimalPart = useCallback(getDecimalNumber, [premium]);

  return (
    <>
      <WholePart>{getWholePart(premium)}</WholePart>
      <DecimalPart>{getDecimalPart(premium)}</DecimalPart>
    </>
  );
};

const PremiumItem = ({ value, ...props }) => {
  return (
    <StyledPremium {...props} value={<PremiumContent premium={value} />} />
  );
};

PremiumItem.propTypes = {
  value: PropTypes.number.isRequired,
};

PremiumItem.displayName = 'PremiumItem';

export default PremiumItem;
