import { IdentityProvider } from '@stytch/react';

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

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 IdentityProviderPage = () => {
  return <IdentityProvider presentation={presentation} getIDPConsentManifest={getManifest} />;
};

export default IdentityProviderPage;