import React from 'react'
import { omit } from '@skava/utils'
import { SingleShippingProps } from './typings'
import {
  Label,
  InputBox,
  FirstName,
  MiddleName,
  LastName,
  AddressLine,
  City,
  State,
  PostalCode,
  Country,
  Telephone,
  Email,
  RequiredWrapper,
  ButtonWrapper,
  RequiredLabel,
  Button,
  FormWrapper,
  LinkButton,
  Wrapper,
} from './styled'

function defaultRenderButton(props: SingleShippingProps) {
  return <LinkButton height={'16'} />
}

function defaultRenderForm(props: SingleShippingProps) {
  return (
    <FormWrapper>
      <FirstName>
        <Label width={'150'} />
        <InputBox />
      </FirstName>

      <MiddleName>
        <Label width={'150'} />
        <InputBox />
      </MiddleName>

      <LastName>
        <Label width={'150'} />
        <InputBox />
      </LastName>

      <AddressLine>
        <Label width={'150'} />
        <InputBox />
      </AddressLine>

      <AddressLine>
        <Label width={'150'} />
        <InputBox />
      </AddressLine>

      <City>
        <Label width={'150'} />
        <InputBox />
      </City>

      <State>
        <Label width={'150'} />
        <InputBox />
      </State>

      <PostalCode>
        <Label width={'150'} />
        <InputBox />
      </PostalCode>

      <Country>
        <Label width={'150'} />
        <InputBox />
      </Country>

      <Telephone>
        <Label width={'150'} />
        <InputBox />
      </Telephone>

      <Email>
        <Label width={'150'} />
        <InputBox />
      </Email>

      <RequiredWrapper>
        <RequiredLabel width={'160'} height={'12'} />
      </RequiredWrapper>
    </FormWrapper>
  )
}

function defaultRenderBox(props: SingleShippingProps) {
  const { renderButton, renderForm, ...remainingProps } = props
  const passThroughProps = omit(remainingProps, ['children'])
  const formView = renderForm(passThroughProps)
  const buttonView = renderButton(passThroughProps)
  return (
    <React.Fragment>
      {buttonView}
      {formView}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: SingleShippingProps) {
  const { className, children, dataQa } = props
  return (
    <Wrapper className={className} data-qa={dataQa}>
      {children}
    </Wrapper>
  )
}

export {
  defaultRenderButton,
  defaultRenderForm,
  defaultRenderBox,
  defaultRenderWrapper,
}