import { useQuery, gql } from '@apollo/client';
import { MapFeaturesQuery, MapFeaturesQueryVariables } from 'types/graphql';

const MAP_FEATURES = gql`
  query MAP_FEATURES($region: String!) {
    features: geoJSON(region: $region)
  }
`;

export const MapFeaturesProvider = ({
  region,
  children,
}: {
  region: string;
  children: (features: any) => any;
}) => {
  const { data, loading } = useQuery<
    MapFeaturesQuery,
    MapFeaturesQueryVariables
  >(MAP_FEATURES, {
    variables: { region },
  });
  if (loading) {
    return 'Loading...';
  } else if (data?.features) {
    const features = JSON.parse(data.features);
    return children(features);
  }
};