import React, { FC } from 'react'
import { PickupPoint as PickupPointData } from '../model/models'

export declare interface PickupPointProps {
  pickupPoint: PickupPointData
  checked: boolean
  onSelect: (id: string) => void
  displayDistance?: boolean
}

const PickupPoint: FC<PickupPointProps> = ({
  pickupPoint,
  checked,
  onSelect,
  displayDistance,
}) => {
  return (
    <div className="radio mbs">
      <label htmlFor={`pp_${pickupPoint.id}`}>
        <input
          id={`pp_${pickupPoint.id}`}
          type="radio"
          value={pickupPoint.id}
          name="pickuppoint"
          className="radio__checkmark"
          checked={checked}
          onChange={event => {
            if (event.currentTarget.checked) {
              onSelect(pickupPoint.id)
            }
          }}
        />
        <span className="pp_name">{pickupPoint.displayName}</span>
        {displayDistance && (
          <>
            <span className="dot mls mrs">•</span>
            <span>{pickupPoint.distance} km</span>
          </>
        )}
      </label>
      {pickupPoint.leadTime?.description && (
        <div className="mbxs">{pickupPoint.leadTime?.description}</div>
      )}
      {checked && (
        <div className="flex flex-dir-row">
          <div className="flex flex-dir-col pp_details">
            <span>{pickupPoint.address}</span>
            <span>
              {pickupPoint.open247
                ? pickupPoint.lockerDescription
                : pickupPoint.openingHours}
            </span>
          </div>
        </div>
      )}
    </div>
  )
}

export default PickupPoint
