import { ReactNode } from 'react'

import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'

import { T9n } from 'features/T9n'

type LabelProps = {
  backgroundColor?: string,
  width?: string,
}

const Label = styled.label<LabelProps>`
  display: flex;
  height: 50px;
  width: ${({ width }) => width || '100%'};
  padding: 0 25px;
  background-color: ${({ backgroundColor = '#3F3F3F' }) => backgroundColor};
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  border: 1px solid transparent;
  /* stylelint-disable-next-line */
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 48px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;

  ${isMobileDevice
    ? css`
     height: 36px;
     font-size: 12px;
     padding: 0 13px;
     align-items: center;
     :nth-child(3){
      width: 48%;
     }
     :nth-child(4){
      width: 48%;
     }
    `
    : ''};

  .StripeElement--webkit-autofill {
    background-color: transparent !important;
  }
`

const Text = styled(T9n)`
  margin-right: 5px;
  white-space: nowrap;
  ${isMobileDevice
    ? css`
      line-height: 12px;
    `
    : ''};
`

const ElementWrapper = styled.div`
  height: 100%;
  flex-grow: 1;
  ${isMobileDevice
    ? css`
      height: auto;
      line-height: 12px;
    `
    : ''};
`

type Props = {
  backgroundColor?: string,
  children: ReactNode,
  label?: string,
  width?: string,
}

export const ElementContainer = ({
  backgroundColor,
  children,
  label,
  width,
}: Props) => (
  <Label width={width} backgroundColor={backgroundColor}>
    {label && <Text t={label} />}
    <ElementWrapper>
      {children}
    </ElementWrapper>
  </Label>
)