import React from 'react';
import { getFeatureFlags } from 'beta/components/feature-flags/FeatureFlags';
import { inject, observer } from 'mobx-react';
import Authentication from 'store/authentication';
import UI from 'store/UI';
import { useSalesLocationsQuery } from 'typings/graphql';

import SalesLocationModal from './SalesLocations';

type SalesLocationPromptProps = {
  ui?: UI;
  authentication?: Authentication;
};

const SalesLocationPrompt = ({ authentication, ui }: SalesLocationPromptProps) => {
  const featureFlag = getFeatureFlags();
  if (authentication?.isStaff && featureFlag.mobileSignup) {
    const { data, loading } = useSalesLocationsQuery({ ssr: false });

    return (
      <>
        {(ui?.showSalesLocationPrompt ||
          (authentication?.isStaff && !authentication?.hasSalesLocation)) && (
          <SalesLocationModal locations={data} loading={loading} />
        )}
      </>
    );
  } else return null;
};

export default inject('ui', 'authentication')(observer(SalesLocationPrompt));