import { useCallback, useState } from 'react';

import { useLingui } from '@lingui/react/macro';
import { useSearchParams } from 'react-router';
import { useLocation } from 'react-router';

import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
import { Input } from '@documenso/ui/primitives/input';

import { TeamCreateDialog } from '~/components/dialogs/team-create-dialog';
import { SettingsHeader } from '~/components/general/settings-header';
import { OrganisationTeamsTable } from '~/components/tables/organisation-teams-table';

export default function OrganisationSettingsTeamsPage() {
  const { t } = useLingui();

  const [searchParams, setSearchParams] = useSearchParams();
  const { pathname } = useLocation();

  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');

  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
  /**
   * Handle debouncing the search query.
   */
  const handleSearchQueryChange = useCallback(
    (newQuery: string) => {
      const params = new URLSearchParams(searchParams?.toString());

      if (newQuery.trim()) {
        params.set('query', newQuery);
      } else {
        params.delete('query');
      }

      setSearchParams(params);
    },
    [searchParams, setSearchParams],
  );

  const currentParamQuery = searchParams?.get('query') ?? '';
  if (currentParamQuery !== debouncedSearchQuery) {
    handleSearchQueryChange(debouncedSearchQuery);
  }

  return (
    <div>
      <SettingsHeader title={t`Teams`} subtitle={t`Manage the teams in this organisation.`}>
        <TeamCreateDialog />
      </SettingsHeader>

      <Input
        defaultValue={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder={t`Search`}
        className="mb-4"
      />

      <OrganisationTeamsTable />
    </div>
  );
}