import React from 'react';
import PropTypes from 'prop-types';
import DoodleLogo from '../DoodleLogo';
import { LINKS, PAGE } from '../../constants/logo';
import { userPropType } from '../../utils/user';

const LogoLink = ({ logoUrl, user, currentPageType, customUrl }) => {
  /** Gets the redirect URL depending on:
   * Whether there is a user
   * The page the user is on
   * Whether a custom URL is passed in
   */
  const getRedirectUrl = () => {
    const hasValidCustomUrl = customUrl && customUrl !== '';
    if (user) {
      if (currentPageType === PAGE.PRODUCT) {
        return LINKS.DASHBOARD;
      }
      // site
      return LINKS.HOMEPAGE;
    }

    // user is logged out
    if (currentPageType === PAGE.PRODUCT && hasValidCustomUrl) {
      return customUrl;
    }
    // site
    return LINKS.HOMEPAGE;
  };

  return (
    <a href={getRedirectUrl()} aria-label="Logo" className="LogoLink">
      {logoUrl ? <img alt="Logo" className="LogoLink-image" src={logoUrl} /> : <DoodleLogo />}
    </a>
  );
};

LogoLink.propTypes = {
  /** Defines the user and the shape of the data. */
  user: userPropType,

  /** The current page the user is on - defaults to site */
  currentPageType: PropTypes.oneOf(['site', 'product']),

  /** Custom URL passed in from a premium account */
  customUrl: PropTypes.string,

  /** Logo URL to add a custom logo - defaults to empty string, and if empty, Doodle logo will show */
  logoUrl: PropTypes.string,
};

LogoLink.defaultProps = {
  user: null,
  currentPageType: PAGE.SITE,
  logoUrl: '',
  customUrl: '',
};
export default LogoLink;