import React, { type JSX, useCallback, useEffect } from 'react';
import Link from 'next/link';
import { useTranslation } from 'next-i18next';

import AdminExternalAccountsContainer from '~/client/services/AdminExternalAccountsContainer';
import { toastError } from '~/client/util/toastr';

import PaginationWrapper from '../PaginationWrapper';
import { withUnstatedContainers } from '../UnstatedUtils';
import ExternalAccountTable from './Users/ExternalAccountTable';

type ManageExternalAccountProps = {
  adminExternalAccountsContainer: AdminExternalAccountsContainer;
};

const ManageExternalAccount = (
  props: ManageExternalAccountProps,
): JSX.Element => {
  const { t } = useTranslation();
  const { adminExternalAccountsContainer } = props;
  const { activePage, totalAccounts, pagingLimit } =
    adminExternalAccountsContainer.state;

  const externalAccountPageHandler = useCallback(
    async (selectedPage) => {
      try {
        await adminExternalAccountsContainer.retrieveExternalAccountsByPagingNum(
          selectedPage,
        );
      } catch (err) {
        toastError(err);
      }
    },
    [adminExternalAccountsContainer],
  );

  // for Next routing
  useEffect(() => {
    externalAccountPageHandler(1);
  }, [externalAccountPageHandler]);

  const pager = (
    <PaginationWrapper
      activePage={activePage}
      changePage={externalAccountPageHandler}
      totalItemsCount={totalAccounts}
      pagingLimit={pagingLimit}
      align="center"
      size="sm"
    />
  );

  return (
    <>
      <p>
        <Link
          href="/admin/users"
          prefetch={false}
          className="btn btn-outline-secondary"
        >
          <span className="material-symbols-outlined" aria-hidden="true">
            arrow_back
          </span>
          {t('admin:user_management.back_to_user_management')}
        </Link>
      </p>
      <h2>{t('admin:user_management.external_account_list')}</h2>
      {totalAccounts !== 0 ? (
        <>
          {pager}
          <ExternalAccountTable />
          {pager}
        </>
      ) : (
        <>{t('admin:user_management.external_account_none')}</>
      )}
    </>
  );
};

const ManageExternalAccountWrapper = withUnstatedContainers(
  ManageExternalAccount,
  [AdminExternalAccountsContainer],
);

export default ManageExternalAccountWrapper;