import { Fragment, memo } from 'react';

import { isNil } from 'lodash-es';
import { IconInfoCircle } from '@material-hu/icons/tabler';
import HuDivider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuStateCard from '@material-hu/components/composed-components/StateCard';
import { type AvatarProps as HuAvatarProps } from '@material-hu/components/design-system/Avatar/types';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuChips from '@material-hu/components/design-system/Chip';
import HuPagination from '@material-hu/components/design-system/Inputs/Pagination';
import HuInputSearch from '@material-hu/components/design-system/Inputs/Search';

import { type LeaderCollaboratorsSectionProps } from 'src/pages/dashboard/performance/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { COLLABORATORS_PAGE_SIZE, FILTER_EMPTY_TITLE_KEYS } from './constants';
import LeaderCollaboratorRow from './LeaderCollaboratorRow';
import LeaderCollaboratorsSkeleton from './LeaderCollaboratorsSkeleton';
import { getVisibleFilterItems } from './utils';

const LeaderCollaboratorsSection = ({
  users,
  usersLoading,
  usersFetching,
  query,
  setQuery,
  selectedFilter,
  setSelectedFilter,
  availableFilters,
  page,
  setPage,
  totalPages,
  onUserSelect,
}: LeaderCollaboratorsSectionProps) => {
  const { t } = useLokaliseTranslation('performance');

  const filterItems = getVisibleFilterItems(availableFilters);

  return (
    <Stack sx={{ gap: 2 }}>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 2,
          flexWrap: 'wrap',
        }}
      >
        <Typography
          variant="globalM"
          sx={{ fontWeight: 600 }}
        >
          {t('collaborators')}
        </Typography>
        {filterItems.length > 0 && (
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 2,
              flexWrap: 'wrap',
            }}
          >
            <Typography
              variant="body2"
              sx={{ color: 'text.secondary' }}
            >
              {t('general:filter_by')}
            </Typography>
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 1,
                flexWrap: 'wrap',
              }}
            >
              {filterItems.map(item => (
                <HuChips
                  key={String(item.value)}
                  label={t(item.translationKey)}
                  isSelected={selectedFilter === item.value}
                  onClick={() => setSelectedFilter(item.value)}
                />
              ))}
            </Stack>
          </Stack>
        )}
      </Stack>
      <HuInputSearch
        value={query}
        onChange={setQuery}
        placeholder={t('manage_team.search_placeholder')}
        sx={{ width: '100%' }}
      />

      {usersLoading ? (
        <LeaderCollaboratorsSkeleton />
      ) : users.length === 0 ? (
        <HuStateCard
          sx={{ p: 3 }}
          slotProps={{
            title: query
              ? {
                  title: t('manage_team.empty.search'),
                  description: t('manage_team.empty.search_description'),
                }
              : !isNil(selectedFilter)
                ? { title: t(FILTER_EMPTY_TITLE_KEYS[selectedFilter]) }
                : { title: t('empty_reviewed') },
            avatar: {
              Icon: IconInfoCircle as HuAvatarProps['Icon'],
              size: 'large',
              color: 'primary',
            },
          }}
        />
      ) : (
        <HuCardContainer
          fullWidth
          padding={0}
        >
          {users.map((user, idx) => (
            <Fragment key={user.userId}>
              {idx > 0 && <HuDivider sx={{ mx: 3 }} />}
              <LeaderCollaboratorRow
                user={user}
                onSelect={onUserSelect}
              />
            </Fragment>
          ))}
        </HuCardContainer>
      )}

      {totalPages > 1 && (
        <HuPagination
          type="basic"
          limit={COLLABORATORS_PAGE_SIZE}
          page={page + 1}
          totalPages={totalPages}
          loading={usersFetching}
          onChangePage={newPage => setPage(newPage - 1)}
          sx={{
            mt: 1,
            width: '100%',
            alignSelf: 'stretch',
            boxSizing: 'border-box',
          }}
        />
      )}
    </Stack>
  );
};

export default memo(LeaderCollaboratorsSection);
