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)

  // ref?
  const dataQa = props['data-qa'] || props['dataQa']
  return (
    <StyledInput
      // standard
      isValid={props.isValid}
      isActive={props.isActive}
      isDirty={props.isDirty}
      // aria & qa
      data-qa={dataQa}
      // data-debug={props['data-debug']}
      aria-label={props['aria-label'] || props.label || props.labelText}
      // 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 defaultRenderLabelText = (props: InputRenderProps) => {
  // @todo renderRequired, can hover with `title` for more?
  // const requiredSymbol = props.required ? <span title="required"> *</span> : ''
  const requiredSymbol = props.required ? ' *' : ''
  const text = props.label || props.labelText || 'no label'
  const children = text + requiredSymbol

  const hasError = props.isValid === false && props.isDirty === true

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

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

  const hasError = props.isValid === false && props.isDirty === true
  return (
    <StyledError
      key={props.identifier + '-error'}
      id={props.identifier + '-error'}
      isValid={!hasError}
      children={props.state.errorText}
    />
  )
}

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

export const defaultRenderWrap = (props: InputRenderProps) => {
  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

  return <StyledInputWrap {...remainingProps}>{props.children}</StyledInputWrap>
}