import {html} from 'htm/preact';
import {useContext, useState} from 'preact/hooks';

import {AppContext} from '../context.js';
import {Setting, SettingProps} from './index.js';

export function HideVotesSetting(props: SettingProps): TRXComponent {
  const {settings} = useContext(AppContext);

  const [checked, setChecked] = useState(settings.data.hideVotes);
  function toggle(target: string) {
    checked[target] = !checked[target];
    setChecked(checked);

    settings.data.hideVotes = checked;
    void settings.save();
  }

  // Checkbox labels and "targets". The targets should match the keys as defined
  // in the user extension settings.
  const checkboxes = [
    {label: 'Your comments', target: 'ownComments'},
    {label: 'Your topics', target: 'ownTopics'},
    {label: "Other's comments", target: 'comments'},
    {label: "Other's topics", target: 'topics'},
  ].map(
    ({label, target}) =>
      html`
        <li>
          <label>
            <input
              type="checkbox"
              checked=${checked[target]}
              onClick=${() => {
                toggle(target);
              }}
            />
            ${label}
          </label>
        </li>
      `,
  );

  return html`
    <${Setting} ...${props}>
      <p class="info">
        Hides vote counts from topics and comments of yourself or other people.
      </p>

      <ul class="checkbox-list">
        ${checkboxes}
      </ul>
    <//>
  `;
}