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 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 {
  KnowledgeLibraryArticle,
  UpdateEditorsValues,
} from 'src/types/library';
import { useLokaliseTranslation } from 'src/utils/i18n';

import useFormatEditorsOptions from '../hooks/useFormatEditorsOptions';
import useGetCollaborators from '../hooks/useGetCollaborators';

import CheckboxAutocomplete from './CheckboxAutocomplete';
import { MAX_EDITORS_LENGTH } from './constants';

export type EditPermissionsFormContentProps = {
  library: KnowledgeLibraryArticle;
  disabled?: boolean;
  isLoadingEditors?: boolean;
};

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

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

  const formatEditorsOptions = useFormatEditorsOptions();

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

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

  const isChild = !!library.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}
        searchEmpty={searchEmpty}
      />
      {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;