import { useSettings } from '../../context/SettingsContext';
import { AppModal } from './AppModal';

export function SettingsModal({ onClose, onResetWindows }) {
  const {
    showServerNames,
    setShowServerNames,
    showMemberTimezones,
    setShowMemberTimezones,
    allowUncheckedEdits,
    setAllowUncheckedEdits,
    warningsEnabled,
    setWarningsEnabled,
    showTimeTracking,
    setShowTimeTracking,
    boldTabStyling,
    setBoldTabStyling,
    listChangesHint,
    setListChangesHint,
  } = useSettings();

  const handleResetWindows = () => {
    onResetWindows();
    onClose();
  };

  return (
    <AppModal title="Settings" icon="assets/circle_wrench.svg" onClose={onClose}>
      <div className="settings-section">
        <h3 className="settings-section-title">Appearance</h3>
        <label className="settings-row settings-row--toggle">
          <span className="settings-row-label">Show server names</span>
          <input
            type="checkbox"
            className="settings-toggle"
            checked={showServerNames}
            onChange={(e) => setShowServerNames(e.target.checked)}
          />
        </label>
        <label className="settings-row settings-row--toggle">
          <span className="settings-row-label">Show member timezones</span>
          <input
            type="checkbox"
            className="settings-toggle"
            checked={showMemberTimezones}
            onChange={(e) => setShowMemberTimezones(e.target.checked)}
          />
        </label>
        <label className="settings-row settings-row--toggle">
          <span className="settings-row-label">Bold tabs</span>
          <input
            type="checkbox"
            className="settings-toggle"
            checked={boldTabStyling}
            onChange={(e) => setBoldTabStyling(e.target.checked)}
          />
        </label>
        <label className="settings-row settings-row--toggle">
          <span className="settings-row-label">List changes hint</span>
          <input
            type="checkbox"
            className="settings-toggle"
            checked={listChangesHint}
            onChange={(e) => setListChangesHint(e.target.checked)}
          />
        </label>
        <button type="button" className="settings-row settings-row--action" onClick={handleResetWindows}>
          Reset Windows
        </button>
      </div>
      <div className="settings-section">
        <h3 className="settings-section-title">Advanced</h3>
        <label className="settings-row settings-row--toggle">
          <span className="settings-row-label">Disable conflict/rollback warnings</span>
          <input
            type="checkbox"
            className="settings-toggle"
            checked={!warningsEnabled}
            onChange={(e) => setWarningsEnabled(!e.target.checked)}
          />
        </label>
        <label className="settings-row settings-row--toggle">
          <span className="settings-row-label">Allow editing files that aren't checked out</span>
          <input
            type="checkbox"
            className="settings-toggle"
            checked={allowUncheckedEdits}
            onChange={(e) => setAllowUncheckedEdits(e.target.checked)}
          />
        </label>
      </div>
      <div className="settings-section">
        <h3 className="settings-section-title">Time Tracking</h3>
        <label className="settings-row settings-row--toggle">
          <span className="settings-row-label">Show time tracking page</span>
          <input
            type="checkbox"
            className="settings-toggle"
            checked={showTimeTracking}
            onChange={(e) => setShowTimeTracking(e.target.checked)}
          />
        </label>
      </div>
    </AppModal>
  );
}
