import type { FC } from 'react';

import useAuthGuard, {
  GuardTypes,
} from '~/src/components/AuthGuard/useAuthGuard';
import Box from '~/src/components/Box';
import Card from '~/src/components/Card';
import CardAction from '~/src/components/Card/CardAction';
import Clickable from '~/src/components/Clickable';
import Divider from '~/src/components/Divider';
import FadeOnMount from '~/src/components/FadeOnMount';
import ListItem from '~/src/components/ListItem';
import Page from '~/src/components/Page';
import PageMetadata from '~/src/components/PageMetadata';
import Text from '~/src/components/Text';
import useTheme from '~/src/hooks/useTheme';
import { useI18n } from '~/src/lib/i18n';
import { AccountSection } from './components';
import AccountDetails from './components/AccountDetails';
import { UserAccounts } from './components/UserAccounts';
import { SECTION_SPACING } from './constants';
import { AccountProvider } from './useAccount';

const AccountPage: FC = () => {
  const authGuard = useAuthGuard();
  const { t } = useI18n('account');
  const theme = useTheme();

  return (
    <Page
      withMenuButton
      renderHeaderContent={() => (
        <Text size="1.5rem" isBold color={theme.textColor70}>
          {t('pageTitle')}
        </Text>
      )}
      contentStyle={{
        paddingTop: '6rem',
      }}
    >
      {(() => {
        const { user } = authGuard;

        if (authGuard.type === GuardTypes.LOADING || !user) {
          return authGuard.content;
        }

        return (
          <Box maxWidth="56rem" padding="2rem 2rem 10rem" isCentered>
            <FadeOnMount>
              <div>
                <Card padding="0.5rem 1.8rem" data-testid="currentUserCard">
                  <ListItem
                    height="7rem"
                    tag="div"
                    fontSize="1.8rem"
                    image={user.image}
                    imageSize="4.2rem"
                    spaceBetweenRows={1}
                    title={user.name!}
                    subtitle={user.email}
                    renderAfter={() => (
                      <Clickable href="/logout" padding="0 0 0 2rem">
                        <Text size="1.6rem" opacity={0.8} isBold>
                          {t('logout')}
                        </Text>
                      </Clickable>
                    )}
                  />
                </Card>
                <SectionDivider />
                {authGuard.content ? (
                  <AccountSection>
                    <Card padding="2rem">{authGuard.content}</Card>
                  </AccountSection>
                ) : (
                  (() => {
                    // if user is an Orchard admin it is possible
                    // to emulate any existing Songwhip account
                    if (user.isEmployee) {
                      // edge case, employee user should always have emulated account
                      if (!user.accounts || !user.accounts.length) {
                        return (
                          <Text centered>
                            User does not have any linked accounts
                          </Text>
                        );
                      }

                      return (
                        // Employee has only one emulated account linked to it
                        <AccountProvider accountId={user.accounts[0].id}>
                          <AccountSection title={t('selectedAccount')}>
                            <Card>
                              <Box padding="0.8rem 2rem">
                                <Text
                                  padding="2rem 0"
                                  size="1.7rem"
                                  color={theme.textColor90}
                                  isBold
                                >
                                  {user.accounts[0].name ||
                                    `Account ${user.accounts[0].id}`}
                                </Text>
                              </Box>
                              <CardAction
                                text={t('changeAccount')}
                                testId="changeAccountButton"
                                href="/account/pick"
                              />
                            </Card>
                          </AccountSection>
                          <AccountDetails />
                        </AccountProvider>
                      );
                    }

                    return <UserAccounts userId={user.id} />;
                  })()
                )}
              </div>
            </FadeOnMount>
          </Box>
        );
      })()}
      <PageMetadata title={t('pageTitle')} />
    </Page>
  );
};

const SectionDivider = () => (
  <Divider isDashed margin={`${SECTION_SPACING} 0`} />
);

export default AccountPage;