/**
 * Copyright (c) 2023-present Pi Dash Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

// types
import { useTranslation } from "@pi-dash/i18n";
import type { TWebhookEventTypes } from "@pi-dash/types";

type Props = {
  value: string;
  onChange: (value: TWebhookEventTypes) => void;
};

const WEBHOOK_EVENT_TYPES: { key: TWebhookEventTypes; i18n_label: string }[] = [
  {
    key: "all",
    i18n_label: "Send me everything",
  },
  {
    key: "individual",
    i18n_label: "Select individual events",
  },
];

export function WebhookOptions(props: Props) {
  const { value, onChange } = props;
  const { t } = useTranslation();

  return (
    <>
      <h6 className="text-13 font-medium">{t("Which events would you like to trigger this webhook?")}</h6>
      <div className="space-y-3">
        {WEBHOOK_EVENT_TYPES.map((option) => (
          <div key={option.key} className="flex items-center gap-2">
            <input
              id={option.key}
              type="radio"
              value={option.key}
              checked={value == option.key}
              onChange={() => onChange(option.key)}
            />
            <label className="text-13" htmlFor={option.key}>
              {t(option.i18n_label)}
            </label>
          </div>
        ))}
      </div>
    </>
  );
}
