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

export type TInputWrapper = {
  paddingX?: number,
  wrapperWidth?: number,
}

export const wrapperStyles = css<TInputWrapper>`
  width: ${({ wrapperWidth }) => (wrapperWidth ? `${wrapperWidth}px` : '100%')};
  height: 48px;
  margin: 20px 0;
  padding-left: ${({ paddingX = 24 }) => (paddingX ? `${paddingX}px` : '')};
  padding-right: ${({ paddingX = 24 }) => (paddingX ? `${paddingX}px` : '')};
  padding-top: 13px;
  padding-bottom: 11px;
  display: flex;
  align-items: center;
  background-color: #3F3F3F;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
`

export const InputWrapper = styled.div<TInputWrapper>`
  ${wrapperStyles}
`

type TLabel = {
  labelWidth?: number,
}

export const Label = styled.label<TLabel>`
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  padding-top: 2px;
  color: ${({ theme: { colors } }) => colors.secondary};
  width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};
`

type TInputStyled = {
  inputWidth?: number,
}

export const inputStyles = css<TInputStyled>`
  flex-grow: 1;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  width: ${({ inputWidth }) => (inputWidth ? `${inputWidth}px` : '')};
  background-color: transparent;
  border: transparent;
  margin-left: 24px;
  color: ${({ theme: { colors } }) => colors.text};

  &[type='password'] {
    letter-spacing: 6px;
  }

  :focus {
    border-color: transparent;
    outline: none;
  }

  :-webkit-autofill,
  :-webkit-autofill:hover,
  :-webkit-autofill:focus,
  :-webkit-autofill:active  {
    box-shadow: 0 0 0 30px #3F3F3F inset;
    caret-color: ${({ theme: { colors } }) => colors.text};
    -webkit-text-fill-color: ${({ theme: { colors } }) => colors.text};
  }
`

export const InputStyled = styled.input<TInputStyled>`
  ${inputStyles}
`