import React, { memo } from "react";

function SettingsTab({ settings, onSettingsChange, saveSettings }) {
  return (
    <section className="card">
      <h3>Глобальные настройки аккаунтов</h3>
      <div className="row">
        <label>
          <span className="label-line">Лимит групп на аккаунт</span>
          <input
            type="number"
            min="1"
            value={settings.accountMaxGroups === "" ? "" : settings.accountMaxGroups}
            onChange={(event) => {
              const value = event.target.value;
              onSettingsChange("accountMaxGroups", value === "" ? "" : Number(value));
            }}
            onBlur={() => {
              const value = Number(settings.accountMaxGroups);
              onSettingsChange("accountMaxGroups", Number.isFinite(value) && value > 0 ? value : 1);
            }}
          />
        </label>
        <label>
          <span className="label-line">Лимит действий в день на аккаунт</span>
          <input
            type="number"
            min="1"
            value={settings.accountDailyLimit === "" ? "" : settings.accountDailyLimit}
            onChange={(event) => {
              const value = event.target.value;
              onSettingsChange("accountDailyLimit", value === "" ? "" : Number(value));
            }}
            onBlur={() => {
              const value = Number(settings.accountDailyLimit);
              onSettingsChange("accountDailyLimit", Number.isFinite(value) && value > 0 ? value : 1);
            }}
          />
        </label>
        <label>
          <span className="label-line">Таймер после FLOOD (мин)</span>
          <input
            type="number"
            min="0"
            value={settings.floodCooldownMinutes === "" ? "" : settings.floodCooldownMinutes}
            onChange={(event) => {
              const value = event.target.value;
              onSettingsChange("floodCooldownMinutes", value === "" ? "" : Number(value));
            }}
            onBlur={() => {
              const value = Number(settings.floodCooldownMinutes);
              onSettingsChange("floodCooldownMinutes", Number.isFinite(value) && value >= 0 ? value : 0);
            }}
          />
        </label>
        <label>
          <span className="label-line">Отлёжка инвайта (дни)</span>
          <input
            type="number"
            min="0"
            value={settings.inviteFloodCooldownDays === "" ? "" : settings.inviteFloodCooldownDays}
            onChange={(event) => {
              const value = event.target.value;
              onSettingsChange("inviteFloodCooldownDays", value === "" ? "" : Number(value));
            }}
            onBlur={() => {
              const value = Number(settings.inviteFloodCooldownDays);
              onSettingsChange("inviteFloodCooldownDays", Number.isFinite(value) && value >= 0 ? value : 0);
            }}
          />
        </label>
        <label>
          <span className="label-line">Отлёжка общая (дни)</span>
          <input
            type="number"
            min="0"
            value={settings.generalFloodCooldownDays === "" ? "" : settings.generalFloodCooldownDays}
            onChange={(event) => {
              const value = event.target.value;
              onSettingsChange("generalFloodCooldownDays", value === "" ? "" : Number(value));
            }}
            onBlur={() => {
              const value = Number(settings.generalFloodCooldownDays);
              onSettingsChange("generalFloodCooldownDays", Number.isFinite(value) && value >= 0 ? value : 0);
            }}
          />
        </label>
        <label>
          <span className="label-line">Режим тишины (мин)</span>
          <input
            type="number"
            min="1"
            value={settings.quietModeMinutes === "" ? "" : settings.quietModeMinutes}
            onChange={(event) => {
              const value = event.target.value;
              onSettingsChange("quietModeMinutes", value === "" ? "" : Number(value));
            }}
            onBlur={() => {
              const value = Number(settings.quietModeMinutes);
              onSettingsChange("quietModeMinutes", Number.isFinite(value) && value > 0 ? value : 1);
            }}
          />
        </label>
        <label>
          <span className="label-line">Хранить очередь (часы)</span>
          <input
            type="number"
            min="1"
            value={settings.queueTtlHours === "" ? "" : settings.queueTtlHours}
            onChange={(event) => {
              const value = event.target.value;
              onSettingsChange("queueTtlHours", value === "" ? "" : Number(value));
            }}
            onBlur={() => {
              const value = Number(settings.queueTtlHours);
              onSettingsChange("queueTtlHours", Number.isFinite(value) && value > 0 ? value : 1);
            }}
          />
        </label>
      </div>
      <div className="row-inline">
        <button className="secondary" onClick={saveSettings}>Сохранить настройки</button>
      </div>
    </section>
  );
}

export default memo(SettingsTab);