import React from 'react';
import { Button } from '../Button';

const UPGRADE_TO_PRO_URL = 'https://store.buffiniandcompany.com/product?itemId=RMPRO&periodUnit=Month';
const COACHING_URL = 'https://www.buffini.com/coaching/one2one/';

const PRO_MEMBERSHIPS = ['pro', 'rmpro', 'referral maker pro'];
const TOP_TIER_MEMBERSHIPS = ['one2one', 'one2one coaching', 'leadership', 'leadership coaching'];

export declare interface IAppHeaderUpsell {
  className?: string;
  membership?: string;
  upgradeToProUrl?: string;
  coachingUrl?: string;
  [x: string]: any;
}

export const AppHeaderUpsell: React.FC<IAppHeaderUpsell> = (props) => {
  const { className = '', membership = '', upgradeToProUrl = UPGRADE_TO_PRO_URL, coachingUrl = COACHING_URL, ...otherProps } = props;

  const isMembership = (memberships: string[]) => {
    if (!membership) return false;
    return memberships.includes(membership.trim().toLowerCase());
  };

  const showUpgradeToPro = !isMembership(PRO_MEMBERSHIPS) && !isMembership(TOP_TIER_MEMBERSHIPS);
  const showCoaching = !isMembership(TOP_TIER_MEMBERSHIPS);

  if (!showUpgradeToPro && !showCoaching) {
    return null;
  }

  return (
    <div className={`b-app-header-upsell ${className}`} {...otherProps}>
      <span className="b-app-header-upsell-text">Upgrade to</span>
      {showUpgradeToPro && (
        <Button href={upgradeToProUrl} target="_blank" size="sm" round className="b-app-header-upsell-btn-pro">
          PRO
        </Button>
      )}
      {showUpgradeToPro && showCoaching && <span className="b-app-header-upsell-text">or</span>}
      {showCoaching && (
        <Button href={coachingUrl} target="_blank" size="sm" round className="b-app-header-upsell-btn-coaching">
          Coaching
        </Button>
      )}
    </div>
  );
};