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 { CommonState } from 'src/state'
import { wording } from 'src/words'
import { Icons } from 'atoms/Icons'
import { HeaderProps, FormProps } from './typings'
import {
  SubmitButton,
  CancelButton,
  ButtonGroup,
  StyledTextBoxPlugin,
  StyledObserverForm,
  StyledPrimaryButton,
  StyledHeading,
  StyledLabel,
} from './styled'

function defaultRenderButtonGroup(props: FormProps) {
  const { handleToggleVisibility, onSubmit } = props

  return (
    <ButtonGroup>
      <SubmitButton onClick={onSubmit} text={wording.saveLabel} />
      <CancelButton onClick={handleToggleVisibility} text={wording.cancel} />
    </ButtonGroup>
  )
}

function defaultRenderButton(props: HeaderProps, state: CommonState) {
  const { renderButtonGroup, handleClick } = props
  const { isVisible, handleToggleVisibility } = state
  const inputsList = [
    {
      type: 'text',
      name: 'listName',
      label: 'list name',
      'data-qa': 'qa-create-list-name-textbox',
    },
  ]
  const formState = new OneFormState().setInputsList(inputsList)

  const view =
    isVisible === true ? (
      <PluginsContext.Provider value={[StyledTextBoxPlugin]}>
        <StyledObserverForm
          state={formState}
          renderButtonGroup={renderButtonGroup}
          onSubmit={handleClick}
          handleToggleVisibility={handleToggleVisibility}
        />
      </PluginsContext.Provider>
    ) : (
      <StyledPrimaryButton
        text={wording.createList}
        onClick={handleToggleVisibility}
      />
    )
  return view
}

function defaultRenderContent(props: HeaderProps) {
  const { statusContent } = props
  return statusContent && <StyledLabel content={statusContent} />
}

function defaultRenderHeader(props: HeaderProps) {
  return (
    <React.Fragment>
      <Icons breedType={'list'} />
      <StyledHeading breedType={'h2'} content={wording.lists} />
    </React.Fragment>
  )
}

export {
  defaultRenderButtonGroup,
  defaultRenderButton,
  defaultRenderContent,
  defaultRenderHeader,
}