import styled, { withTheme, css } from "styled-components"
import * as React from "react"
import withTranslate from "jamplay-common/i18n/withTranslate"
const withFluidStyle = css`
  display:block;
  width: 100%;
  box-sizing: border-box;
`
const withErrorStyle = css`
    border-color: red;
`

const InputCSS: any = css`
  box-shadow: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: ${(props) => props.theme.matteWhite};
  color: ${(props) => props.theme.matteBlack};
  border: solid ${(props) => props.theme.borderGrey} 1px;
  padding: 9px 12px;
  box-sizing: border-box;
  font-size: 1.1rem;
  line-height: 1.5rem;
  font-family: Helvetica, Arial, Thonburi, Tahoma;
  &:focus {
    border-color: #2188ff;
    outline: none;
    box-shadow: inset 0 1px 1px rgba(27, 31, 35, 0.075),
      0 0 0 2px rgba(3, 102, 214, 0.3);
  }
  &::placeholder {
    color: ${(props) => props.theme.grey};
    font-size: 1rem;
  }
`
const hintVisible = css`
   opacity:1;
   transform: translateY(0);
`

const hintError = css`
    color: ${(props) => props.theme.pumpkin};
`

const Hint = styled.div`
color: ${(props) => props.theme.grey};
${hintError}
transition: 0.222s ease-in-out all;
margin-top:3px;
font-size:0.8rem;
text-align: left;
min-height: 24px;
opacity: 0;
transform: translateY(10px);
white-space: nowrap;
${hintVisible}
`
export interface InputPropTypes<T> extends React.InputHTMLAttributes<T> {
  fluid?: boolean
  error?: boolean
}
const InputSingleLine: React.ComponentClass<InputPropTypes<{}>> = withTheme(styled.input`
    ${InputCSS};
    ${(props: any) => props.fluid ? withFluidStyle : ""};
    ${(props: any) => props.error ? withErrorStyle : ""};
`) as any

const InputTextAreaInput: React.ComponentClass<InputPropTypes<{}>> = withTheme(styled.textarea`
    ${InputCSS};
    ${(props: any) => props.error ? withErrorStyle : ""};
`) as any

export interface InputErrorMsgPropTypes extends withTranslatePropType {
  id?: any
  visible?: any
  value?: any
  error?: boolean
}

@withTranslate
class InputErrorMsg extends React.Component<InputErrorMsgPropTypes> {
  public render() {
    if (this.props.error) {
      return <Hint {...this.props} >{this.props.value}</Hint>
    } else {
      return null
    }
  }
}

export {
  InputCSS,
  InputSingleLine,
  InputTextAreaInput,
  InputErrorMsg
}