import {useUserProfile} from '@app/profile/requests/use-user-profile';
import React, {Fragment, useContext} from 'react';
import {PageMetaTags} from '@common/http/page-meta-tags';
import {PageStatus} from '@common/http/page-status';
import {SitePageLayout} from '@app/site-page-layout';
import {User} from '@common/auth/user';
import {Tabs} from '@common/ui/tabs/tabs';
import {TabList} from '@common/ui/tabs/tab-list';
import {Tab} from '@common/ui/tabs/tab';
import {Trans} from '@common/i18n/trans';
import {Link, Outlet, useLocation} from 'react-router-dom';
import {SiteConfigContext} from '@common/core/settings/site-config-context';
import {message} from '@common/i18n/message';
import {ProfilePageHeader} from '@app/profile/header/profile-page-header';

const PageTabs = [
  {uri: 'lists', label: message('Lists')},
  {uri: 'ratings', label: message('Ratings')},
  {uri: 'reviews', label: message('Reviews')},
  {uri: 'comments', label: message('Comments')},
  {uri: 'followers', label: message('Followers')},
  {uri: 'followed-users', label: message('Following')},
];

export function UserProfilePage() {
  const query = useUserProfile();

  const content = query.data ? (
    <Fragment>
      <PageMetaTags query={query} />
      <PageContent user={query.data.user} />
    </Fragment>
  ) : (
    <PageStatus query={query} loaderClassName="absolute inset-0 m-auto" />
  );

  return <SitePageLayout>{content}</SitePageLayout>;
}

interface PageContentProps {
  user: User;
}
function PageContent({user}: PageContentProps) {
  return (
    <div className="container mx-auto mt-24 px-14 md:mt-40 md:px-24">
      <ProfilePageHeader user={user} />
      <ProfileTabs user={user} />
    </div>
  );
}

interface ProfileTabsProps {
  user: User;
}
function ProfileTabs({user}: ProfileTabsProps) {
  const {
    auth: {getUserProfileLink},
  } = useContext(SiteConfigContext);
  const profileLink = getUserProfileLink!(user);

  const {pathname} = useLocation();
  const tabName = pathname.split('/').pop();
  let selectedTab = PageTabs.findIndex(tab => tab.uri === tabName);
  if (selectedTab === -1) {
    selectedTab = 0;
  }

  return (
    <Tabs className="mt-34" selectedTab={selectedTab}>
      <TabList>
        {PageTabs.map(tab => (
          <Tab
            key={tab.uri}
            width="min-w-132"
            elementType={Link}
            to={`${profileLink}/${tab.uri}`}
            replace
          >
            <Trans {...tab.label} />
          </Tab>
        ))}
      </TabList>
      <div className="mt-24">
        <Outlet />
      </div>
    </Tabs>
  );
}