import { useState } from 'react';

import Stack from '@material-hu/mui/Stack';

import Spinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';
import Tabs from '@material-hu/components/design-system/Tabs';

import { useLokaliseTranslation } from 'src/utils/i18n';

import {
  type ApplicationResponse,
  type ApplicationSource,
  type JobApplicationFormAnswerDto,
} from '../../../types';

import { AdditionalDocumentation } from './AdditionalDocumentation';
import { ProfileTab } from './profile/ProfileTab';

type TabName = 'application' | 'profile_documents';

type SideContentTabsProps = {
  application: ApplicationResponse;
  applicationSources: ApplicationSource[];
  isLoading: boolean;
  jobApplicationFormAnswers?: JobApplicationFormAnswerDto;
  scrollableRef?: React.RefObject<HTMLDivElement>;
};

export const SideContentTabs = ({
  application,
  applicationSources,
  isLoading,
  jobApplicationFormAnswers,
  scrollableRef,
}: SideContentTabsProps) => {
  const { t } = useLokaliseTranslation('ats');
  const [selectedTab, setSelectedTab] = useState<TabName>('application');
  const resolvedSourceName =
    applicationSources.find(s => s.id === application.sourceId)?.name ??
    application.sourceName;

  if (isLoading)
    return (
      <Stack sx={{ pt: 16, width: '100%' }}>
        <Spinner centered />
      </Stack>
    );

  return (
    <Stack sx={{ gap: 3, width: '100%' }}>
      <Tabs
        defaultValue={selectedTab}
        onTabChange={name => setSelectedTab(name as TabName)}
        tabs={[
          {
            label: t('job_application.tabs.application.title'),
            value: 'application',
          },
          {
            label: t('job_application.tabs.profile_documents.title'),
            value: 'profile_documents',
          },
        ]}
      />
      {selectedTab === 'application' && (
        <ProfileTab
          application={application}
          sourceName={resolvedSourceName}
          jobApplicationFormAnswers={jobApplicationFormAnswers}
        />
      )}
      {selectedTab === 'profile_documents' && (
        <AdditionalDocumentation
          files={application.files}
          jobId={application.jobId}
          applicationId={application.id}
          scrollableRef={scrollableRef}
        />
      )}
    </Stack>
  );
};