import React from 'react'
import { PaymentInformationFormProps } from './typings'
import {
  TextPlaceholder,
  RectanglePlaceholder
} from 'atoms/Placeholder'
import {
  Wrapper,
  Form,
  FormButton,
  Checkbox,
  Error,
  InputPlaceholder,
} from './styled'

/**
 * render Buttons
 */
function defaultRenderButton(props: PaymentInformationFormProps) {
  return (
    <React.Fragment>
      <InputPlaceholder height={50} />
      <InputPlaceholder height={50} />
    </React.Fragment>
  )
}

/**
 * render form fields
 */
function defaultRenderPaymentForm(props: PaymentInformationFormProps) {
  return (
    <React.Fragment>
      <InputPlaceholder height={50} />
      <InputPlaceholder className={'input-box-card'} height={50} />
      <InputPlaceholder className={'input-box-cvv'} height={50} />
      <InputPlaceholder className={'input-box'} height={50} />
      <InputPlaceholder className={'input-box'} height={50} />
    </React.Fragment>
  )
}

/**
 * render Error fields
 */
function defaultRenderError(props: PaymentInformationFormProps) {
  return <TextPlaceholder height={14} />
}

/**
 * render check box
 */
function defaultRenderCheckBox(props: PaymentInformationFormProps) {
  return (
    <React.Fragment>
      <RectanglePlaceholder width={20} height={20} />
      <TextPlaceholder width={500} height={20} />
    </React.Fragment>
  )
}

/**
 * render shipping form
 */
function defaultRenderBillingForm(props: PaymentInformationFormProps) {
  return (
    <React.Fragment>
      <InputPlaceholder height={50} />
      <InputPlaceholder height={50} />
      <InputPlaceholder height={50} />
      <InputPlaceholder height={50} />
      <InputPlaceholder className={'input-box'} height={50} />
      <InputPlaceholder className={'input-box'} height={50} />
    </React.Fragment>
  )
}

function defaultRenderForm(props: PaymentInformationFormProps) {
  const {renderPaymentForm, renderCheckBox, renderBillingForm, renderButton, ...remainingProps} = props
  const PaymentFormView = renderPaymentForm(remainingProps)
  const checkBoxView = renderCheckBox(remainingProps)
  const ShippingFormView = renderBillingForm(remainingProps)
  const buttonView = renderButton(remainingProps)
  return (
    <React.Fragment>
      <Form>{PaymentFormView}</Form>
      <Checkbox>{checkBoxView}</Checkbox>
      <Form>{ShippingFormView}</Form>
      <FormButton>{buttonView}</FormButton>
    </React.Fragment>
  )
}

/**
 * render Box
 */
function defaultRenderBox(props: PaymentInformationFormProps) {
  const { renderError, renderForm, ...remainingProps } = props
  const errorView = renderError(remainingProps)
  const formView = renderForm(remainingProps)
  return (
    <React.Fragment>
      <Error>{errorView}</Error>
      {formView}
    </React.Fragment>
  )
}

/**
 * render wrapper
 */
function defaultRenderWrapper(props: PaymentInformationFormProps) {
  const { className, children } = props
  return (
    <Wrapper className={className}>
      {children}
    </Wrapper>
  )
}

export {
  defaultRenderButton,
  defaultRenderPaymentForm,
  defaultRenderBillingForm,
  defaultRenderError,
  defaultRenderCheckBox,
  defaultRenderBox,
  defaultRenderWrapper,
  defaultRenderForm,
}