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>
      {isSafe(firstName) || isSafe(lastName) ? (
        <Name>
          {firstName} {lastName}
        </Name>
      ) : (
        <Empty />
      )}
      {isSafe(addressLine1) ? (
        <AddressLine1 itemprop="streetAddress1">{addressLine1}</AddressLine1>
      ) : (
        <Empty />
      )}
      {isSafe(addressLine2) ? (
        <AddressLine2 itemprop="streetAddress2">{addressLine2}</AddressLine2>
      ) : (
        <Empty />
      )}
      {isSafe(city) ? (
        <City itemprop="addressLocality">{city},</City>
      ) : (
        <Empty />
      )}
      {isSafe(state) ? (
        <State itemprop="addressRegion">{state}</State>
      ) : (
        <Empty />
      )}
      {isSafe(zipCode) ? (
        <ZipCode itemprop="postalCode">{zipCode}</ZipCode>
      ) : (
        <Empty />
      )}
      {isSafe(country) ? (
        <Country itemprop="addressCountry">{country}</Country>
      ) : (
        <Empty />
      )}
    </React.Fragment>
  )
}

// @todo this type iis missing
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 }