import * as React from 'react'
import { omit } from '@skava/utils'
import { InputRenderProps, RenderWrapRemainingProps } from './typings'
import {
  StyledTooltip,
  StyledInputWrap,
  StyledInput,
  StyledLabelText,
  StyledError,
} from './styled'

export const defaultRender = (props: InputRenderProps) => {
  // console.debug('[1form] defaultRender Input')
  // console.log(props)

  return (
    <StyledInput
      // standard
      isValid={props.isValid}
      isActive={props.isActive}
      // aria & qa
      data-qa={props['data-qa']}
      aria-label={props['aria-label'] || props.label}
      // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields
      // aria-required={props.required}
      aria-invalid={props.isValid === false}
      // events
      onChange={props.onChange}
      // @note - these were in wrapper, which did not work well...
      onFocus={props.onFocus}
      onBlur={props.onBlur}
      // browser
      id={props.identifier}
      value={props.value}
      type={props.type}
      // need to manage spreading these...
      pattern={props.pattern}
      minLength={props.minLength}
      maxLength={props.maxLength}
      required={props.required}
      placeholder={props.placeholder}
      disabled={props.isDisabled}
      autoComplete={props.autoComplete}
      autoFocus={props.autoFocus}
      // name
      name={props.propertyName}
    />
  )
}

export const renderLabelText = (props: InputRenderProps) => {
  // console.debug('[1form] renderLabelText')
  // console.log(props)

  return (
    <StyledLabelText
      htmlFor={props.identifier}
      isActive={props.isActive}
      isValid={props.isValid}
      hasValue={props.value !== ''}
    >
      {props.label || props.labelText}
    </StyledLabelText>
  )
}

export const renderError = (props: InputRenderProps) => {
  // console.debug('[1form] renderError')
  // console.log(props)

  return (
    <StyledError
      id={props.identifier + '-error'}
      isValid={props.isValid}
      children={props.state.errorText}
    />
  )
}

/**
 * @todo use this for documentation on hover or click to expand
 */
export const defaultRenderAfterInput = (props: InputRenderProps) => {
  // @todo - description not added, was from codesandbox
  return <StyledTooltip isActive={props.isActive} children={props.tooltip} />
}

export const defaultRenderWrap = (props: InputRenderProps) => {
  // console.debug('[1form] defaultRenderWrap')
  // console.log(props)

  const remainingProps = omit(props, [
    'isActive',
    'data-qa',
    'aria-label',
    'onChange',
    'onFocus',
    'onBlur',
    'identifier',
    'value',
    'label',
    'tooltip',
    'type',

    // isRequired?
    'required',
    'maxLength',
    'minLength',
    'placeholder',
    'pattern',
  ]) as RenderWrapRemainingProps

  // @todo this just seems wrong... see the render of the class
  return (
    <StyledInputWrap {...remainingProps}>
      {renderLabelText(props)}
      {props.children}
      {defaultRenderAfterInput(props)}
      {renderError(props)}
    </StyledInputWrap>
  )
}