import styled, {css, keyframes} from 'styled-components';
import {
  white as whiteColor,
  gray70,
  gray50,
  actionColor,
  errorColor,
  black as blackColor,
  spacing,
} from '@propellerads/stylevariables';

import {SPINNER_COLOR, SPINNER_SIZE} from './types';

const spin = keyframes`
  to {
    transform: rotate(360deg);
  }
`;

const sizeStyles = {
  sm: css`width: ${spacing * 4}px; height: ${spacing * 4}px`,
  md: css`width: ${spacing * 6}px; height: ${spacing * 6}px`,
};

const colorStyles = {
  black: blackColor,
  white: whiteColor,
  blue: actionColor,
  gray: gray70,
  gray_dark: gray50,
  red: errorColor,
};

interface SpinnerContainerProps {
    show: boolean
    center: boolean
}

const SpinnerContainer = styled.div`
     display: inline-block;
     transition: opacity 0.5s cubic-bezier(0.35,0,0.25,1);
     
    ${({show}: SpinnerContainerProps) => (show
    ? css`opacity: 1;`
    : css`opacity: 0;`)}

    ${({center}: SpinnerContainerProps) => center && css`
         display: flex;
         width: 100%;
         height: 100%;
         box-sizing: border-box;
         align-items: center;
         align-self: center;
         justify-content: center;
    `}
`;

interface SpinnerViewProps {
    color: SPINNER_COLOR
    size: SPINNER_SIZE
}

const SpinnerView = styled.div`
     ${({color}: SpinnerViewProps) => css`
         display: flex;
         align-items: flex-end;
         vertical-align: text-bottom;
         border: 0.15em solid ${colorStyles[color]};
         border-right-color: transparent;
         border-radius: 50%;
         animation: ${spin} 0.75s linear infinite;
    `}
    
    ${({size}: SpinnerViewProps) => sizeStyles[size]}
`;

export {SpinnerContainer, SpinnerView};