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 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 { renderForm, ...remainingProps } = props
  const formView = renderForm(remainingProps)
  return <React.Fragment>{formView}</React.Fragment>
}

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

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