import { createStytchB2BClient, StytchB2BIdentityProvider } from '@stytch/vanilla-js/b2b';

const stytch = createStytchB2BClient('public-token-test-be835f9a-ac37-44cf-817d-f58ac2b3ae3d');

const isProfileScope = (scope) => scope === 'openid' || scope === 'email' || scope === 'profile';
const isDataScope = (scope) => !isProfileScope(scope);

const getScopeDescription = (scope) => {
  switch (scope) {
    case 'openid':
      return 'Your account ID';
    case 'email':
      return 'Your email address';
    case 'profile':
      return 'Your name and profile';
    case 'read:data':
      return 'Read access to your data';
    case 'write:data':
      return 'Write access to your data';
    default:
      return `The ${scope} permission`;
  }
};

const getManifest = ({ scopes, clientName }) => [
  {
    header: `${clientName} wants to view your Profile`,
    items: [
      {
        text: 'View information stored in your Profile about your account and your user.',
        details: scopes.filter(isProfileScope).map(getScopeDescription),
      },
    ],
  },
  {
    header: `${clientName} wants to access your Data`,
    items: scopes.filter(isDataScope).map(getScopeDescription),
  },
];

const presentation = {
  theme: { 'font-family': 'Arial' },
};

customElements.define('stytch-identity-provider', StytchB2BIdentityProvider);
// In HTML: <stytch-identity-provider id="stytch-identity-provider" />
document.getElementById('stytch-identity-provider').render({
  client: stytch,
  presentation,
  getIDPConsentManifest: getManifest,
});