import { useMemo, useState } from 'react';
import { useFormContext } from 'react-hook-form';

import { GetDrawerConfiguration } from '@material-hu/hooks/useDrawerV2';
import Stack from '@material-hu/mui/Stack';

import HuUserAvatar from '@material-hu/components/composed-components/UserAvatar';
import HuCheckbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import HuSearch from '@material-hu/components/design-system/Inputs/Search';

import { useInfiniteUsersPublicSearch } from 'src/services/usersQueries';
import { User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { sToMs } from 'src/utils/timeUtils';

import { InfiniteList } from 'src/components/InfiniteList';

type Props = {
  name?: string;
};

export const usePeopleSelectionDrawer: GetDrawerConfiguration<Props> = args => {
  const { t } = useLokaliseTranslation(['documents', 'general']);
  const { name = 'users', closeDrawer, open } = args;
  const form = useFormContext();
  const [search, setSearch] = useState('');
  const selectedUsers = form.watch(name);

  const onHandleClick = () => {
    setSearch('');
    closeDrawer();
  };

  const onClose = () => {
    form.setValue(name, []);
    closeDrawer();
  };

  const {
    data: users,
    isLoading,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteUsersPublicSearch(
    {
      search,
      limit: 30,
    },
    {
      enabled: open,
      staleTime: sToMs(60),
    },
  );

  const usersList = useMemo(() => {
    return users?.pages.flatMap(page => page.data.items) || [];
  }, [users]);

  const handleSelectUser = (user: User) => {
    form.setValue(
      name,
      selectedUsers?.some((u: User) => u.id === user.id)
        ? selectedUsers.filter((u: User) => u.id !== user.id)
        : [...selectedUsers, user],
    );
  };

  return {
    title: t('SELECT_PEOPLE'),
    children: (
      <Stack>
        <HuSearch
          value={search}
          onChange={setSearch}
        />
        <InfiniteList
          isSuccess={!!users}
          isLoading={isLoading}
          isEmpty={users?.pages && !users?.pages.length}
          fetchNextPage={fetchNextPage}
          hasNextPage={!!hasNextPage}
          isFetchingNextPage={isFetchingNextPage}
        >
          <Stack>
            {usersList.map(user => (
              <Stack
                key={`${user.id}-${user.employeeInternalId}`}
                sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}
              >
                <HuCheckbox
                  checked={selectedUsers.some((u: User) => u.id === user.id)}
                  onChange={() => handleSelectUser(user)}
                />
                <HuUserAvatar
                  user={user}
                  profileProps={{ showEmployeeInternalId: true }}
                  sx={{ maxWidth: 500 }}
                />
              </Stack>
            ))}
          </Stack>
        </InfiniteList>
      </Stack>
    ),
    primaryButtonProps: {
      children: t('GENERAL:APPLY'),
      onClick: onHandleClick,
    },
    secondaryButtonProps: {
      children: t('GENERAL:CANCEL'),
      onClick: onClose,
    },
    onClose,
  };
};