import * as React from 'react';
import styles from './AdminApp.module.scss';
import { TopNav } from './TopNav';
import { ScreenKey } from './types';
import { ApprovalRouteApi } from '../../services/api';
import { PortalDictionaryClient } from '../../services/portalDictionary';
import { TemplateRoute } from '../../models';
import { DashboardScreen } from '../screens/DashboardScreen';
import { RequestTypesScreen } from '../screens/RequestTypesScreen';
import { RoutesScreen } from '../screens/RoutesScreen';
import { RouteStepsScreen } from '../screens/RouteStepsScreen';
import { ResolveScreen } from '../screens/ResolveScreen';

export interface IAdminAppProps {
  api: ApprovalRouteApi;
  /** Undefined, пока SPFx выдаёт AAD-клиент для api.tnsu.kz. */
  dictionary?: PortalDictionaryClient;
  currentUserEmail?: string;
}

export const AdminApp: React.FC<IAdminAppProps> = ({ api, dictionary, currentUserEmail }) => {
  const [screen, setScreen] = React.useState<ScreenKey>('dashboard');
  const [selectedRoute, setSelectedRoute] = React.useState<TemplateRoute | undefined>();
  const [selectedRequestTypeName, setSelectedRequestTypeName] = React.useState('');

  const navigate = (key: ScreenKey): void => {
    setScreen(key);
  };

  const openSteps = (route: TemplateRoute): void => {
    setSelectedRoute(route);
    api.requestTypes.get(route.requestTypeId)
      .then(rt => setSelectedRequestTypeName(rt.name))
      .catch(() => setSelectedRequestTypeName(`#${route.requestTypeId}`));
    setScreen('routeSteps');
  };

  return (
    <div className={styles.shell}>
      <TopNav active={screen} onSelect={navigate} />
      <div className={styles.content}>
        {screen === 'dashboard' && <DashboardScreen api={api} onNavigate={navigate} />}
        {screen === 'requestTypes' && <RequestTypesScreen api={api} />}
        {screen === 'routes' && <RoutesScreen api={api} dictionary={dictionary} onOpenSteps={openSteps} />}
        {screen === 'routeSteps' && selectedRoute && (
          <RouteStepsScreen
            api={api}
            route={selectedRoute}
            requestTypeName={selectedRequestTypeName}
            onBack={() => setScreen('routes')}
          />
        )}
        {screen === 'resolve' && (
          <ResolveScreen api={api} dictionary={dictionary} currentUserEmail={currentUserEmail} />
        )}
      </div>
    </div>
  );
};