import type { SidebarViewMode } from '@dorfteich/shared';
import { SIDEBAR_VIEW_MODES } 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 default sidebar view (issue #108): folders (page tree) or
 * labels. Owner-set; every member can still override it locally via the
 * sidebar toggle. Rides the generic pond PATCH like CommentPolicySetting.
 */
export function SidebarViewSetting({
  pondId,
  pondSlug,
  value,
}: {
  pondId: string;
  pondSlug: string;
  value: SidebarViewMode;
}): React.JSX.Element {
  const { t } = useTranslation();
  const queryClient = useQueryClient();
  const [error, setError] = useState<unknown>(null);
  const [saved, setSaved] = useState(false);

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

  return (
    <div className="sidebar-view-setting">
      <FormError error={error} />
      <p className="sidebar-view-setting__hint">{t('layout.sidebar.view.defaultHint')}</p>
      <label>
        {t('layout.sidebar.view.defaultLabel')}{' '}
        <select
          value={value}
          onChange={(event) => void save(event.target.value as SidebarViewMode)}
        >
          {SIDEBAR_VIEW_MODES.map((mode) => (
            <option key={mode} value={mode}>
              {t(`layout.sidebar.view.${mode}`)}
            </option>
          ))}
        </select>
      </label>
      {saved && <FormSuccess message={t('layout.sidebar.view.saved')} />}
    </div>
  );
}