import React, {
  ReactElement
} from 'react'
import styled from 'styled-components'

import {
  DefaultInterface,
  ComponentResponsiveStyled
} from "../../common/helpers/Theme"
import {
  CustomComponent
} from "../"

export interface InputBaseInterface extends DefaultInterface {
  mask?: string | any[]
  type?: string
  name?: string
  styles?: any
  value?: string
}

function InputBase(props: InputBaseInterface): ReactElement {
  const {
    className,
    placeholder,
    mask,
    type,
    onChange,
    maxLength,
    name,
    value
  } = props

  const options = {}

  if (type === 'number') {
    Object.assign(options, {
      numeral: true
    })
  }

  if (mask === 'mm/yy') {
    Object.assign(options, {
      date: true,
      datePattern: ['m', 'y']
    })
  }

  if (mask === 'credit-card') {
    Object.assign(options, {
      creditCard: true
    })
  }

  const newProps: any = {
    type,
    name,
    className,
    placeholder,
    onChange,
    maxLength,
    options,
    value
  }

  delete newProps.options

  return (
    <input {...newProps} />
  )
}

const Component: React.FunctionComponent<InputBaseInterface> = styled(InputBase)`
  ${ props => ComponentResponsiveStyled(props, 'input') }

  outline: 0px none;
  text-align: left;
  width: 100%;
  transition: all .5s;

  &&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: ${ props => props.styles && props.styles.input.default.font.color.smallest || props.theme && props.theme.input.default.font.color.smallest };
  }

  &&:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: ${ props => props.styles && props.styles.input.default.font.color.smallest || props.theme && props.theme.input.default.font.color.smallest };
  }

  &&::-ms-input-placeholder { /* Microsoft Edge */
    color: ${ props => props.styles && props.styles.input.default.font.color.smallest || props.theme && props.theme.input.default.font.color.smallest };
  }
`

export const Input: React.FunctionComponent<InputBaseInterface> = (inputProps): ReactElement => {
  const {
    native = false
  } = inputProps

  return !native
    ? <CustomComponent {...inputProps} callback={(props: InputBaseInterface) => <Component {...props} /> } />
    : <InputBase {...inputProps} />
}