import React from 'react';
import Masthead from '../common/components/masthead/masthead';
import IconCheck from '../common/components/assets/icon/icon-check';

export default {
  title: 'common/Masthead',
  component: Masthead,
  parameters: {
    layout: 'fullscreen',
  },
  args: {
    subscribeCtaText: 'Subscribe',
    logoutUrl: '/log-out',
    manageMyAccountUrl: '/my/account',
    savedStoriesUrl: '/saved/stories',
    gsClientAdminUrl: '/client-admin',
    mySubscriptionUrl: '/my-subscription',
    personalInfoUrl: '/personal-info',
    billingUrl: '/billing',
    newslettersAndPreferencesUrl: '/newsletters-and-preferences',
    giftSubscriptionsUrl: '/gift-subscriptions',
    helpUrl: '/help',
    isClientAdmin: false,
    isGroupSubscriber: false,
    hasTemporaryExtraItem: false,
    fullName: 'John Smith',
    userType: 'subscriber',
  },
  argTypes: {
    userType: {
      control: {
        type: 'select',
        options: ['anonymous', 'registered', 'subscriber'],
      },
    },
  },
};

const url = 'https://example.com/auth';

export const masthead = args => {
  const { hasTemporaryExtraItem, userType, ...props } = args;
  const tei = hasTemporaryExtraItem && (
    <>
      <IconCheck />
    </>
  );
  switch (userType) {
    case 'anonymous':
      return (
        <Masthead
          {...props}
          temporaryExtraItem={tei}
          loginUrl={url}
          showSubscribe
          isLoggedIn={false}
          userType={userType}
        />
      );
    case 'registered':
      return (
        <Masthead
          {...props}
          temporaryExtraItem={tei}
          showSubscribe
          isLoggedIn
          userType={userType}
        />
      );
    case 'subscriber':
      return (
        <Masthead
          {...props}
          temporaryExtraItem={tei}
          showSubscribe={false}
          showGiftGivingButton
          isLoggedIn
          userType={userType}
        />
      );
    default:
      return <>userType not recognized</>;
  }
};
