import React from 'react'
import { PluginsContext } from '@skava/forms/build/dist/src/new-forms/plugins/PluginsContext'
import { OneFormState } from '@skava/forms/build/dist/src/new-forms/OneForm/OneForm'
import { FormBuilderProps } from './typings'
import {
  Wrapper,
  StyledTitle,
  StyledForm,
  StyledPrimaryButton,
  StyledEmailPlugin,
} from './styled'

function defaultRenderButtonGroup(props: FormBuilderProps) {
  const { buttonLabel, onSubmit } = props
  const handleClick = onSubmit
  return (
    <StyledPrimaryButton
      breedType="text"
      text={buttonLabel}
      onClick={handleClick}
    />
  )
}

function defaultRenderTitle(props: FormBuilderProps) {
  const { title } = props
  return <StyledTitle content={title} />
}
function defaultRenderForm(props: FormBuilderProps) {
  const {
    renderTitle,
    renderButtonGroup,
    inputPlaceholder,
    buttonLabel,
    ...remainingProps
  } = props
  const inputsListForFieldSet = [
    {
      type: 'email',
      label: inputPlaceholder,
    },
  ]
  const formState = new OneFormState().setInputsList(inputsListForFieldSet)
  return (
    <PluginsContext.Provider value={[StyledEmailPlugin]}>
      <StyledForm
        state={formState}
        renderButtonGroup={renderButtonGroup}
        buttonLabel={buttonLabel}
      />
    </PluginsContext.Provider>
  )
}

function defaultRenderWrapper(props: FormBuilderProps) {
  const {
    className,
    dataQa,
    renderTitle,
    renderForm,
    ...remainingProps
  } = props
  return (
    <Wrapper className={className} data-qa={dataQa}>
      {renderTitle(remainingProps)}
      {renderForm(remainingProps)}
    </Wrapper>
  )
}

export {
  defaultRenderTitle,
  defaultRenderButtonGroup,
  defaultRenderForm,
  defaultRenderWrapper,
}