import React from 'react'
import { ValidationStrategyContext } from '@skava/forms/build/dist/new-forms/strategies'
import { PluginsContext } from '@skava/forms/build/dist/new-forms/plugins//PluginsContext'
import { TextPlugin } from '@skava/forms/build/dist/new-forms/plugins//TextPlugin'
import { OneFormState } from '@skava/forms/build/dist/new-forms/OneForm/OneForm'
import { FormRenderProps } from '@skava/forms/build/dist/new-forms/forms'
import { StyledOneObserverForm, StyledButtonWithIcon, Wrapper } from './styled'
import { SearchInputProps } from './typings'
import { inputsList } from './fixture'
import { SearchValidationStrategy } from './strategy'

const formState = new OneFormState().setInputsList(inputsList)

function defaultRenderButtonGroup(props: FormRenderProps) {
  const { onSubmit } = props
  return (
    <StyledButtonWithIcon iconType={'search'} text={''} onClick={onSubmit} />
  )
}

function defaultRenderForm(props: SearchInputProps) {
  const { onSubmit, ...remainingProps } = props
  const strategy = new SearchValidationStrategy(props)
  const view = (
    <ValidationStrategyContext.Provider value={strategy}>
      <PluginsContext.Provider value={[TextPlugin]}>
        <StyledOneObserverForm state={formState} {...remainingProps} />
      </PluginsContext.Provider>
    </ValidationStrategyContext.Provider>
  )
  return view
}

function defaultRenderWrapper(props: SearchInputProps) {
  const { children, className, dataQa } = props
  const passThroughProps = {
    className,
    'data-qa': dataQa,
  }
  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export { defaultRenderWrapper, defaultRenderForm, defaultRenderButtonGroup }