import React from 'react'
import { isSafe } from 'exotic'
import { PhysicalAddressProps } from './typings'
import {
  AddressWrapper,
  Name,
  AddressLine1,
  AddressLine2,
  City,
  Country,
  State,
  PostalCode,
} from './styled'

function defaultRenderDetails(props: PhysicalAddressProps) {
  const { address } = props
  const {
    firstName,
    lastName,
    addressLine1,
    addressLine2,
    city,
    country,
    state,
    postalCode,
  } = address

  return (
    <React.Fragment>
      {(isSafe(firstName) || isSafe(lastName)) && (
        <Name>
          {firstName} {lastName}
        </Name>
      )}
      {isSafe(addressLine1) && (
        <AddressLine1 itemProp="streetAddress1">{addressLine1}</AddressLine1>
      )}
      {isSafe(addressLine2) && (
        <AddressLine2 itemProp="streetAddress2">{addressLine2}</AddressLine2>
      )}
      {isSafe(city) && <City itemProp="addressLocality">{city},</City>}
      {isSafe(state) && <State itemProp="addressRegion">{state}</State>}
      {isSafe(postalCode) && (
        <PostalCode itemProp="postalCode">{postalCode}</PostalCode>
      )}
      {isSafe(country) && (
        <Country itemProp="addressCountry">{country}</Country>
      )}
    </React.Fragment>
  )
}

/**
 * @todo use PhysicalAddressProps & {renderDetails: never, renderWrapper: never}
 */
function defaultRenderWrapper(props: PhysicalAddressProps) {
  const { className, children, dataQa } = props
  return (
    <AddressWrapper
      itemProp="address"
      itemScope
      itemType="http://schema.org/PostalAddress"
      className={className}
      data-qa={dataQa}
    >
      {children}
    </AddressWrapper>
  )
}

export { defaultRenderWrapper, defaultRenderDetails }