import React from 'react';
import { Panel, Tab, Tabs } from 'react-bootstrap';
import ICAT from '../../config/icat/icat';
import SSO from './SSO';
import LoginForm from './LoginForm';

function LoginTabs() {
  return (
    <Tabs id="login-tabs" animation={false}>
      {ICAT.authentication.sso.enabled && (
        <Tab eventKey="sso" title="SSO">
          <Panel className="tab-panel-fix">
            <SSO />
          </Panel>
        </Tab>
      )}
      {ICAT.authentication.authenticators
        .filter((a) => !a.hidden)
        .map((authenticator) => (
          <Tab
            key={authenticator.plugin}
            eventKey={authenticator.plugin}
            title={authenticator.title}
          >
            <LoginForm plugin={authenticator.plugin} />
          </Tab>
        ))}
    </Tabs>
  );
}

export default LoginTabs;
