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 renderBox(props: ShippingProps) {
  const {
    renderForm,
    ...remainingProps
  } = props
  const formView = renderForm(remainingProps)
  return <Form>{formView}</Form>
}

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

export {
  defaultRenderWrapper,
  defaultRenderForm
}