import React from 'react'
import { AddressProps } from 'abstractions/Address/typings'
import {
  PhysicalAddressProps,
  Name,
  AddressLine1,
  AddressLine2,
  Country,
  City,
  State,
  ZipCode,
} from 'molecules/PhysicalAddress'
import { Address } from './Address'
import { StyledTitle, StyledAddress } from './styled'

interface AddressType {
  title?: string
  firstName?: string
  lastName?: string
  addressLine1?: string
  addressLine2?: string
  country?: string
  city?: string
  state?: string
  zipCode?: string
}

const createRenderProps = (data: AddressType) => {
  const renderTitle = (props: AddressProps) => {
    return <StyledTitle breedType="h3" content={data.title} />
  }
  const renderDetails = (props: PhysicalAddressProps) => {
    return (
      <React.Fragment>
        <Name>
          {data.firstName} {data.lastName}
        </Name>
        <AddressLine1 itemprop="streetAddress1">
          {data.addressLine1}
        </AddressLine1>
        <AddressLine2 itemprop="streetAddress2">
          {data.addressLine2}
        </AddressLine2>
        <Country itemprop="addressCountry">{data.country}</Country>
        <City itemprop="addressLocality">{data.city},</City>
        <State itemprop="addressRegion">{data.state}</State>
        <ZipCode itemprop="postalCode">{data.zipCode}</ZipCode>
      </React.Fragment>
    )
  }
  const renderAddress = (props: AddressProps) => {
    const attributes = {
      renderDetails,
    }
    return <StyledAddress {...attributes} />
  }

  return {
    renderTitle,
    renderAddress,
  }
}

class AddressThemed extends React.Component {
  render() {
    const { address, title } = this.props
    const { renderTitle, renderAddress } = createRenderProps({
      title,
      ...address,
    })

    const attributes = {
      renderTitle,
      renderAddress,
    }
    return <Address {...attributes} />
  }
}

export { AddressThemed }
export default AddressThemed