import { useState } from "react";
import { FormattedMessage } from "react-intl";

import AsyncButton from "@/Components/Button/AsyncButton";
import useModeration from "@/Hooks/useModeration";
import { useAllPreferences } from "@/Hooks/usePreferences";

export default function ModerationSettingsPage() {
  const { addMutedWord, removeMutedWord, getMutedWords } = useModeration();
  const preferences = useAllPreferences();
  const [muteWord, setMuteWord] = useState("");

  return (
    <>
      <h2>
        <FormattedMessage defaultMessage="Moderation" id="wofVHy" />
      </h2>

      <div className="py-4 flex flex-col gap-2">
        <div className="flex items-center mb-2">
          <input
            type="checkbox"
            checked={preferences.preferences.showContentWarningPosts}
            onChange={() =>
              preferences.update({
                ...preferences.preferences,
                showContentWarningPosts: !preferences.preferences.showContentWarningPosts,
              })
            }
            className="mr-2"
            id="showContentWarningPosts"
          />
          <label htmlFor="showContentWarningPosts">
            <FormattedMessage defaultMessage="Show posts that have a content warning tag" id="fQN+tq" />
          </label>
        </div>
      </div>

      <h3>
        <FormattedMessage defaultMessage="Muted Words" id="AN0Z7Q" />
      </h3>
      <div className="flex flex-col g12">
        <div className="flex g8">
          <input
            type="text"
            placeholder="eg. crypto"
            className="w-max"
            value={muteWord}
            onChange={e => setMuteWord(e.target.value.toLowerCase())}
          />
          <AsyncButton
            onClick={async () => {
              await addMutedWord(muteWord);
              setMuteWord("");
            }}>
            <FormattedMessage defaultMessage="Add" id="2/2yg+" />
          </AsyncButton>
        </div>
        {getMutedWords().map(v => (
          <div key={v} className="p br b flex items-center justify-between">
            <div>{v}</div>
            <AsyncButton onClick={() => removeMutedWord(v)}>
              <FormattedMessage defaultMessage="Delete" id="K3r6DQ" />
            </AsyncButton>
          </div>
        ))}
      </div>
    </>
  );
}