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

import { IconInfoCircle } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import CheckboxAutocomplete from '@material-hu/components/composed-components/CheckboxAutocomplete';
import Alert from '@material-hu/components/design-system/Alert';
import Chips from '@material-hu/components/design-system/Chip';
import Title from '@material-hu/components/design-system/Title';
import Tooltip from '@material-hu/components/design-system/Tooltip';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { MAX_EDITORS_LENGTH } from '../../../constants';
import { type Article, type UpdateEditorsValues } from '../../../types';
import { formatEditorsOptions } from '../../../utils';
import { useGetCollaborators } from '../../useGetCollaborators';

export type EditPermissionsFormContentProps = {
  article: Article;
  disabled?: boolean;
  isLoadingEditors?: boolean;
};

export const EditPermissionsFormContent = ({
  article,
  disabled = false,
  isLoadingEditors = false,
}: EditPermissionsFormContentProps) => {
  const { t } = useLokaliseTranslation('libraries');
  const { control } = useFormContext<UpdateEditorsValues>();

  const [parentEditors, editors, search] = useWatch({
    control,
    name: ['parentEditors', 'editors', 'search'],
  });

  const searchQuery = useGetCollaborators(article.id, {
    search,
    page: 1,
    limit: 10,
  });

  const options = formatEditorsOptions(searchQuery.data?.items || []);

  const isChild = !!article.parentId;
  const allEditors = [...editors, ...parentEditors];
  const isMaxEditors = allEditors.length >= MAX_EDITORS_LENGTH;
  const isEditorsEmpty = !isLoadingEditors && allEditors.length === 0;

  const uncheckedDisabled = disabled || isMaxEditors;
  const searchEmpty =
    searchQuery.isSuccess && searchQuery.data?.items?.length === 0;

  return (
    <Stack sx={{ gap: 3 }}>
      <Title
        variant="M"
        title={
          !isChild
            ? t('article.permissions.edit.collaborators.choose')
            : t('general:permissions.edit.title')
        }
        description={t('article.permissions.edit.description')}
      />
      {isMaxEditors && (
        <Alert
          severity="warning"
          title={t('general:permissions.edit.validations.max_reached', {
            count: MAX_EDITORS_LENGTH,
          })}
          sx={{ mt: 'auto' }}
        />
      )}
      <CheckboxAutocomplete
        name="editors"
        label={t('general:search_collaborators')}
        options={options}
        disabled={disabled}
        uncheckedDisabled={uncheckedDisabled}
        searchLoading={searchQuery.isFetching}
        searchLoadingTitle={t('general:loading')}
        searchEmpty={searchEmpty}
        searchEmptyTitle={t('general:empty_search_result')}
      />
      {isChild && (
        <>
          {isEditorsEmpty && (
            <Alert
              severity="info"
              title={t('article.permissions.edit.collaborators.empty')}
            />
          )}
          {parentEditors.length > 0 && (
            <Stack sx={{ gap: 1 }}>
              <Typography
                variant="globalS"
                fontWeight="fontWeightSemiBold"
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 1,
                }}
              >
                {t('general:permissions.edit.collaborators.allowed')}
                <Tooltip
                  direction="top"
                  description={t('article.permissions.edit.description')}
                >
                  <IconInfoCircle />
                </Tooltip>
              </Typography>
              <Stack
                sx={{
                  flexDirection: 'row',
                  flexWrap: 'wrap',
                  gap: 1,
                }}
              >
                {parentEditors.map(editor => (
                  <Chips
                    key={editor.id}
                    label={editor.label}
                    disabled
                  />
                ))}
              </Stack>
            </Stack>
          )}
        </>
      )}
    </Stack>
  );
};

export default EditPermissionsFormContent;