import React from 'react';

import v from '../../styles/Variables';
import styled from 'styled-components';

interface Props {
  callback: () => void;
  disclaimerString?: string;
  theme?: string;
  icon?: string;
  title: string;
  total?: string;
}

interface Styles {
  total?: string;
}

const AddToCartButton = ({ callback, icon, theme, title, total, disclaimerString = '' }: Props) => {
  return (
    <ATC type="button" aria-live="polite" aria-atomic="true" onClick={() => callback()} total={total} className={theme}>
      {total && (
        <Total className="total">
          <small>{disclaimerString === '' ? 'Total' : disclaimerString}</small>
          <span className="float--right">
            <span>{total.slice(0, 1)}</span>
            <span>{total.slice(1, -2)}</span>
            <sup>{total.slice(-2)}</sup>
          </span>
        </Total>
      )}
      <div className="copy text--center no--wrap">
        {icon && <i className={icon} />}
        &nbsp;&nbsp;
        <strong>{title}</strong>
      </div>
    </ATC>
  );
};

export default AddToCartButton;

/* styles */
const ATC = styled.button<Styles>`
  background: ${v.colors.successAlt};
  color: ${v.colors.light};
  display: flex;
  font-size: 18px;
  line-height: 40px;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  padding: ${({ total }) => (total ? 0 : '0 25px')};
  padding-right: 15px;
  text-align: left;
  width: 100%;

  line-height: 55px;

  div.total {
    text-align: center;
    flex: 0.5 0 auto;
  }

  div.copy {
    text-align: center;
    flex: 3;
  }
`;

const Total = styled.div`
  display: inline-block;
  background: ${v.colors.successDark};
  padding: 5px 8px 0px 8px;
  position: relative;
  margin-right: 8px;
  min-height: 40px;

  small {
    position: absolute;
    top: -15px;
    right: 8px;
    font-size: 12px;
    color: ${v.colors.border};
    display: inline-block;
  }
  sup {
    font-size: 50% important!;
    display: inline-block;
    top: -0.2em;
  }

  span {
    display: inline-block;
  }
`;