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

// function renderElements(props: string, comma?: boolean) {
//   const commaText = comma ? ',' : ''
//   const value = props
//   const view = isSafe(value) ? <React.Fragment>{value}{commaText}</React.Fragment> : <Empty />
//   return view
// }

function defaultRenderDetails(props: PhysicalAddressProps) {
  const { address } = props
  const { firstname, lastname, addressline1, addressline2, city, country, state, zipcode } = address
  // const firstnameElement = renderElements(firstName)
  // const lastnameElement = renderElements(lastName, true)
  // const addressElement1 = renderElements(addressLine1, true)
  // const addressElement2 = renderElements(addressLine2, true)
  // const cityElement = renderElements(city, true)
  // const stateElement = renderElements(state, true)
  // const zipcodeElement = renderElements(zipcode)
  return (
    <React.Fragment>
      <Name>{ firstname } { lastname }</Name >
      <AddressLine1 itemprop="streetAddress1">
        {addressline1}
      </AddressLine1>
      <AddressLine2 itemprop="streetAddress2">
        {addressline2}
      </AddressLine2>
      <City itemprop="addressLocality">{city},</City>
      <State itemprop="addressRegion">{state}</State>
      <Zipcode itemprop="postalCode">{zipcode}</Zipcode>
      <Country itemprop="addressCountry">{country}</Country>
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: AddressProp) {
  const {className, children} = props
  return <AddressWrapper itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" className={className}>{children}</AddressWrapper>
}

export { defaultRenderWrapper, defaultRenderDetails }