// DataMap.tsx
import React from 'react'
import { useFragment } from 'react-relay/hooks'
import * as PropTypes from 'prop-types'
import { InferProps } from 'prop-types'
import { graphql } from 'react-relay'
import MapComponent from './Map.js'
// import GeocodeQuery from './__generated__/GeocodeQuery.graphql' // Adjust the import path

// type DataMapProps = {
//  queryReference:Data<GeocodeQuery>;
// }

const FRAGMENT = graphql`
  fragment DataMapCoordinatesFragment on GeoCoordinates {
    latitude
    longitude
  }
`

function DataMap({
  data,
  ...otherProps
}: InferProps<typeof DataMap.propTypes>): React.ReactElement {
  const result = useFragment(
    FRAGMENT, data,
  )

  const {
    latitude, longitude,
  } = result

  if (!latitude || !longitude) {
    return <span>No valid coordinates</span>
  }

  return (
    <MapComponent
      latitude={latitude}
      longitude={longitude}
      {...otherProps}
    />
  )
}

DataMap.propTypes = {
  /** The query reference to use */
  data:PropTypes.object.isRequired,

  /** The query to use */
  QUERY:PropTypes.object,

  /** Accessor to the data in the query response */
  accessor:PropTypes.string,
}

export default DataMap