/**
 * ScheduleFields Component
 *
 * Content dripping / rule scheduling fields.
 * Delays rule activation by a configurable period after subscription start date.
 *
 * @package ArraySubs
 */

import React from "react";
import { __ } from "@wordpress/i18n";

const scheduleUnits = [
  { value: "days", label: __("Days", "arraysubs") },
  { value: "weeks", label: __("Weeks", "arraysubs") },
  { value: "months", label: __("Months", "arraysubs") },
];

const ScheduleFields = ({ rule, updateRule }) => {
  const isEnabled = !!rule.schedule_enabled;

  return (
    <div className="arraysubs-schedule-fields">
      <label className="arraysubs-schedule-fields__toggle">
        <input
          type="checkbox"
          checked={isEnabled}
          onChange={(e) => updateRule({ schedule_enabled: e.target.checked })}
        />
        {__("Delay this rule after subscription starts", "arraysubs")}
      </label>

      {isEnabled && (
        <div className="arraysubs-schedule-fields__config">
          <div className="arraysubs-schedule-fields__row">
            <span className="arraysubs-schedule-fields__label">
              {__("Unlock after", "arraysubs")}
            </span>
            <input
              type="number"
              min="1"
              step="1"
              className="arraysubs-schedule-fields__value"
              value={rule.schedule_value || ""}
              onChange={(e) =>
                updateRule({
                  schedule_value: Math.max(
                    0,
                    parseInt(e.target.value, 10) || 0,
                  ),
                })
              }
              placeholder="0"
            />
            <select
              className="arraysubs-schedule-fields__unit"
              value={rule.schedule_unit || "days"}
              onChange={(e) => updateRule({ schedule_unit: e.target.value })}
            >
              {scheduleUnits.map((unit) => (
                <option key={unit.value} value={unit.value}>
                  {unit.label}
                </option>
              ))}
            </select>
            <span className="arraysubs-schedule-fields__suffix">
              {__("from subscription start date", "arraysubs")}
            </span>
          </div>
          <p className="arraysubs-schedule-fields__help">
            {__(
              "Access will be locked until the specified time has passed since the customer's subscription started. Useful for dripping content over time.",
              "arraysubs",
            )}
          </p>
        </div>
      )}
    </div>
  );
};

export default ScheduleFields;