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

import {
  MediaQuery
} from "../../common/helpers/MediaQuery"
import {
  CustomComponent
} from "../../core"

/* import {
  CustomIcon
} from "../CustomIcon" */
import {
  Div
} from "../../core/Div"
import {
  Paragraph
} from "../../core/Paragraph"
import {
  Label
} from "../../core/Label"
import {
  Input,
  InputBaseInterface
} from "../../core/Input"

interface FormInputBaseInterface extends InputBaseInterface {
  icon?: string
  name?: string
}

const FormInputBase: React.FunctionComponent<FormInputBaseInterface> = (props): ReactElement => {
  const {
    icon,
    label,
    isValid,
    placeholder,
    warning,
    onChange,
    onKeyPress,
    value,
    mask,
    maxLength,
    name,
    touched,
    type
  } = props

  const newProps = Object.assign({}, {...props})

  delete newProps.children
  delete newProps.themed
  delete newProps.isValid
  delete newProps.touched
  delete newProps.touched
  delete newProps.mask
  delete newProps.maxLength
  delete newProps.value
  delete newProps.onKeyPress
  delete newProps.onChange
  delete newProps.placeholder

  return (
    <Div {...newProps}>
      <Label className={`${ icon ? 'icon' : ''}`}>
        { label }
        {/* { icon && <CustomIcon name={icon} /> } */}
      </Label>

      <Input name={name} placeholder={placeholder} mask={mask} value={value} maxLength={maxLength} onChange={onChange} onKeyPress={onKeyPress} type={type} />

      <Paragraph>
        { !isValid && warning && touched ? warning : '' }
      </Paragraph>
    </Div>
  )
}

const Component: React.FunctionComponent<FormInputBaseInterface> = styled(FormInputBase).attrs({
  className: "form-input"
})`
  margin-bottom: 10px;
  position: relative;

  > input {
    flex: none;
    margin-bottom: 2px;
  }

  > label {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 16px;
    flex: 1;
    height: 16px;
    min-height: 16px;
    width: 100%;

    ${ props => props.icon && !props.label && props.placeholder && `
      > .icon {
        position: absolute;
        left: ${ props.placeholder.length * 11.5 }px;
        top: 21px;
      }
    ` }

    > .icon {
      width: 13px;
      height: 13px;
      pointer-events: none;
      background: ${ props => props.theme && props.theme.global.color.white };
      flex: 1;
      justify-content: flex-start;
      align-items: flex-start;
      margin-left: 10px;
      margin-top: 1.5px;

      > img {
        max-height: 13px;
        min-height: 13px;
        min-width: 13px;
        max-width: 13px;
        width: auto;
        height: auto;
      }
    }
  }

  > p {
    transition: all .5s;
    opacity: 1;
    color: ${ (props) => props.theme && props.theme.global.color.red2 };
    font-size: 11px;
    line-height: 13px;
    min-height: 13px;
  }

  ${MediaQuery.xlarge} {
    margin-bottom: 20px;

    > p {
      font-size: 13px;
    }
  }
`

export const FormInput: React.FunctionComponent<FormInputBaseInterface> = (formInputBaseInterface): ReactElement => <CustomComponent {...formInputBaseInterface} callback={(props: FormInputBaseInterface) => <Component {...props} />} />