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

function defaultRenderButton(props: FormBuilderProps) {
  const { buttonLabel } = props
  const validButtonLabel = fromIshToString(buttonLabel)
  return (
    <StyledPrimaryButton
      breedType="text"
      text={validButtonLabel}
      aria-label={validButtonLabel}
    />
  )
}

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

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

export {
  defaultRenderTitle,
  defaultRenderForm,
  defaultRenderWrapper,
}