import { InlineMessage } from "@komi-app/components";
import { FLAGS, useFeatureIsOn } from "@komi-app/flags-sdk";
import When from "@komi-app/when";
import { Link } from "react-router-dom";
import { useIsPhoneNumberSetupPending } from "../OmniChannelUtil";

const PhoneNumberSetupError: React.FC = () => {
  const isPhoneNumberSetupPending = useIsPhoneNumberSetupPending();
  const showMissingPhoneError = useFeatureIsOn(
    FLAGS.FEAT_CRM_590_ERROR_FOR_MISSING_PHONE_NUMBER
  );
  const useTiers = useFeatureIsOn(FLAGS.USE_TIERS_TALENT)
  const isTopTier = useFeatureIsOn(FLAGS.TIER_CREATOR_TOP)
  const showSMSCampaignConfig = useFeatureIsOn(FLAGS.CRM_SMS_V2_OMNICHANNEL_CAMPAIGN_LISTING)

  const hasError = showSMSCampaignConfig && showMissingPhoneError && isPhoneNumberSetupPending

  const showError = useTiers
    ? hasError && isTopTier
    : hasError

  return (
    <When
      value={showError}
      then={
        <InlineMessage
          type="error"
          message={
            <>
              You need to set up a phone number before you can schedule and send
              SMS campaigns.
              <Link to="/admin/settings/audiences-and-campaigns">
                &nbsp;Request access
              </Link>
            </>
          }
        />
      }
    />
  );
};

export default PhoneNumberSetupError;
