import React from 'react'
import { ShippingAddressFormProps as ShippingProps } from './typings'
import {
  Wrapper,
  Error,
  Form,
  StyledTextPlaceholder,
  InputBoxPlaceHolders
} from './styled'

function defaultRenderForm(props: ShippingProps) {
  return (
    <React.Fragment>
      <InputBoxPlaceHolders height={50} />
      <InputBoxPlaceHolders height={50} />
      <InputBoxPlaceHolders height={50} />
      <InputBoxPlaceHolders height={50} />
      <InputBoxPlaceHolders className={'input-box'} height={50} />
      <InputBoxPlaceHolders className={'input-box'} height={50} />
      <InputBoxPlaceHolders className={'form-button'} height={44} />
    </React.Fragment>
  )
}

function defaultRenderError(props: ShippingProps) {
  return <StyledTextPlaceholder width={220} height={14} />
}

function renderBox(props: ShippingProps) {
  const {
    renderError,
    renderForm,
    ...remainingProps
  } = props
  const errorView = renderError(remainingProps)
  const formView = renderForm(remainingProps)
  return (
    <React.Fragment>
      <Error>{errorView}</Error>
      <Form>{formView}</Form>
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: ShippingProps) {
  const { className } = props
  const children = renderBox(props)
  return <Wrapper className={className}>{children}</Wrapper>
}

export {
  defaultRenderWrapper,
  defaultRenderError,
  defaultRenderForm
}