import React from 'react';
import { MastheadSecondary } from '../common/components';

export default {
  title: 'common/Secondary Masthead',
  component: MastheadSecondary,
  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,
    fullName: 'John Smith',
    userVariant: 'anonymous',
  },
  argTypes: {
    userVariant: {
      control: {
        type: 'select',
        options: ['anonymous', 'registered', 'subscriber'],
      },
    },
  },
};

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

export const secondaryMasthead = args => {
  const { userVariant, ...props } = args;
  switch (userVariant) {
    case 'anonymous':
      return (
        <MastheadSecondary
          {...props}
          loginUrl={url}
          showSubscribe
          isLoggedIn={false}
          showLogin
        />
      );
    case 'registered':
      return (
        <MastheadSecondary {...props} showSubscribe isLoggedIn showLogin />
      );
    case 'subscriber':
      return (
        <MastheadSecondary
          {...props}
          showSubscribe={false}
          showGiftGivingButton
          isLoggedIn
          showLogin
        />
      );
    default:
      return <>userVariant not recognized</>;
  }
};
