import styled from '@emotion/styled';

import { css } from '@emotion/core';
import { Box, Flex, Text } from '@rebass/emotion';
import { buttonConfig, colors } from 'utils/theme';
import { ButtonPrimary } from '../../../../../button/button.styles';
import { EmailStatus } from '../../form-module.types';
import { forTabletDown } from 'utils/styles/mixins';

export const FullFormFieldStyles: any = styled.div`
  margin-top: 20px;
  min-width: ${(props: any): any => props.fieldWidth === 'full' ? '100' : '48'}%;

  ${forTabletDown(css`
    min-width: 100%;
  `)}
`;

export const FormWrapper: any = styled(Flex)`
  margin-top: 20px;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;

  textarea, input {
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #363636;
    background: none;
    padding: 10px 0;
  }
`;

export const SubmitWrapper: any = styled(Box)`
  ${ButtonPrimary}
  background-color: ${(props: any): string => {
  switch (props.status) {
    case(EmailStatus.SENT):
      return colors.passedGreen;
    case(EmailStatus.FAILED):
      return colors.failedRed;
    default:
      return colors[buttonConfig.idleBackground];
  }
}
  };
  width: 155px;

  ${forTabletDown(css`
    width: 100%;
  `)}
`;

export const SendingSymbol: any = styled.div`
  border: 2px solid ${colors.white};
  height: 24px;
  width: 24px;
  margin: 0 auto;
  border-radius: 24px;
  border-left: 2px solid transparent;
  @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
  animation:spin 2s linear infinite;
`;

export const IconStyle: any = css`
  height: 24px;
  width: 24px;
  margin: 0 auto;
  @keyframes loadIcon { 0% { fill: transparent; }  100% { fill: ${colors.white};} }
  path {
    fill: ${colors.white};
    animation: loadIcon .3s linear;
  }
`;

export const ErrorText: any = styled(Text)`
  margin-right: auto;
  color: ${colors.failedRed};
`;