/*
  Обычный инпут, принимающий все стандартные html-атрибуты
  Может принимать props label - в качестве плавающего плейсхолдера
  Может принимать props error - для отображении подписи с ошибкой

  todo: описать propTypes
*/

import * as React from 'react'
import styled from 'styled-components'
import { observable } from 'mobx'
// import * as ReactDOM from 'react-dom'

import { BLUE, DARK_LINES, PLACEHOLDER } from '~/components/pru/ui-colors'
import { IInputProps } from './StaticPlaceholderInput.d'
import { CloseBtn } from '~/components/pru'
import { MEDIA } from '~/constants/media-queries'

const Field = styled.div`
  position: relative;
`

const Label = styled.label`
  display: block;
  width: 100%;
  position: absolute;
  top: 10px;
  left: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  color: rgba(48, 48, 48, 0.5);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  transform-origin: 0 100%;
  transition: all 0.3s;
`

const Underline = styled.div`
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: ${DARK_LINES};
  transition: opacity 0.2s linear;

  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: ${BLUE};
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: all 0.4s;
  }
`

const ResetInputBtn = styled(CloseBtn)`
  top: 15px;
  right: 8px;
  width: 16px;
  height: 16px;
  position: absolute;
  display: none;

  &:hover {
    background-color: transparent;
  }

  &::before,
  &::after {
    height: 1px;
  }

  &:hover::before,
  &:hover::after {
    background-color: ${PLACEHOLDER};
  }
`

const Input = styled.input`
  display: block;
  width: 100%;
  height: 100%;
  font-size: 18px;
  font-weight: 300;
  color: #000;
  border: 0;
  outline: 0;
  /* opacity: 0; */
  box-shadow: none;
  transition: opacity .4s linear;
  padding: 7px 0;

  /* &:focus,
  &:valid {
    opacity: 1;
  } */

  &:focus + ${Label},
  &:valid ~ ${Label} {
    transform: translateY(-140%) scale(.7);
  }

  &:focus ~ ${Underline}::after,
  &:valid ~ ${Underline}::after {
    transform: scaleX(1);
  }

  &:valid ~ ${ResetInputBtn} {
    display: block;
  }

  &::-webkit-input-placeholder { color: ${PLACEHOLDER}; }
  &:-ms-input-placeholder { color: ${PLACEHOLDER}; }
  &::-ms-input-placeholder { color: ${PLACEHOLDER}; }
  &::placeholder { color: ${PLACEHOLDER}; }

  @media ${MEDIA.untilTablet} {
    padding: 5px 0;
  }
`

export default class InputSet extends React.Component<IInputProps> {
  @observable data = ''
  InputRef: any = null

  constructor(props: React.Props<{}>) {
    super(props)
    this.handleResetInputClick = this.handleResetInputClick.bind(this)
  }

  handleResetInputClick(event: any) {
    // console.log(event.target.getAttribute('data-input'))
    // this.refs.fieldName.value=""
    //  console.log(this.refs.fieldName)
    // console.log(this.InputRef.props.value)
    this.InputRef.props.value = 'w'
    // const modal = ReactDOM.findDOMNode(this.inputEntry)
    // console.log(modal)
    // this.textInput.value =''
    // const actionElement = event.target.closest('input')
    // console.log(actionElement)
    // this[event.target.name] = event.target.value
    // this[event.target.name] = event.target.value
  }

  render() {
    // const { label, error, ...inputAttributes } = this.props
    const { ...inputAttributes } = this.props
    // console.log(this.refs)
    // const textInput: any
    // console.log(this.InputRef)

    return (
      <Field>
        <Input
          {...inputAttributes}
          required={true}
          ref={(ref: any) => {
            this.InputRef = ref
          }}
        />
        <ResetInputBtn
          onClick={this.handleResetInputClick}
          data-input={this.props.name}
        />
        <Underline />
      </Field>
    )
  }
}