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

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

export interface TextAreaBaseInterface extends DefaultInterface {
  name?: string
  className?: string
  placeholder?: string
  onChange?: any
  maxLength?: number
  styles?: any
  value?: string
}

function TextAreaBase(props: TextAreaBaseInterface): ReactElement {
  const {
    className,
    placeholder,
    onChange,
    maxLength,
    name,
    value
  } = props

  const newProps: TextAreaBaseInterface = {
    name,
    className,
    placeholder,
    onChange,
    maxLength,
    value
  }

  return <textarea {...newProps}>{value}</textarea>
}

const Component: React.FunctionComponent<TextAreaBaseInterface> = styled(TextAreaBase)`
  ${ props => ComponentResponsiveStyled(props, 'textArea') }

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

  &&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: ${ props => !props.isValid && props.touched ? `${ props.theme && props.theme.global.color.red1 }` : 'inherit'};
  }

  &&:-ms-textArea-placeholder { /* Internet Explorer 10-11 */
    color: ${ props => props.isValid && props.touched ? `${ props.theme && props.theme.global.color.red1 }` : 'inherit'};
  }

  &&::-ms-textArea-placeholder { /* Microsoft Edge */
    color: ${ props => props.isValid && props.touched ? `${ props.theme && props.theme.global.color.red1 }` : 'inherit'};
  }
`

export const TextArea: React.FunctionComponent<TextAreaBaseInterface> = (textAreaProps): ReactElement => {
  const {
    native = false
  } = textAreaProps

  return !native
    ? <CustomComponent {...textAreaProps} callback={(props: TextAreaBaseInterface) => <Component {...props} /> } />
    : <TextAreaBase {...textAreaProps} />
}