import type { CommentPolicy } from '@dorfteich/shared';
import { useQueryClient } from '@tanstack/react-query';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

import { FormError, FormSuccess } from '../components/forms';
import { apiPatch } from '../lib/api';

/**
 * The pond's "who may comment" setting (issue #91/#92): every reader, or
 * pond-wide editors only. Rides the generic pond PATCH.
 */
export function CommentPolicySetting({
  pondId,
  pondSlug,
  value,
}: {
  pondId: string;
  pondSlug: string;
  value: CommentPolicy;
}): React.JSX.Element {
  const { t } = useTranslation('comments');
  const queryClient = useQueryClient();
  const [error, setError] = useState<unknown>(null);
  const [saved, setSaved] = useState(false);

  const save = async (policy: CommentPolicy): Promise<void> => {
    setError(null);
    setSaved(false);
    try {
      await apiPatch(`/ponds/${pondId}`, { commentPolicy: policy });
      await queryClient.invalidateQueries({ queryKey: ['pond', pondSlug] });
      setSaved(true);
    } catch (err) {
      setError(err);
    }
  };

  return (
    <div className="comment-policy">
      <FormError error={error} />
      <FormSuccess message={saved ? t('policy.saved') : null} />
      <label className="comment-policy__label">
        {t('policy.label')}
        <select value={value} onChange={(event) => void save(event.target.value as CommentPolicy)}>
          <option value="readers">{t('policy.readers')}</option>
          <option value="editors">{t('policy.editors')}</option>
        </select>
      </label>
      <p className="comment-policy__hint">{t('policy.hint')}</p>
    </div>
  );
}