import { Control, Controller } from "react-hook-form";
import { IWebhook } from "@plane/types";

export const INDIVIDUAL_WEBHOOK_OPTIONS: {
  key: keyof IWebhook;
  label: string;
  description: string;
}[] = [
  {
    key: "project",
    label: "Projects",
    description: "Project created, updated, or deleted",
  },
  {
    key: "cycle",
    label: "Cycles",
    description: "Cycle created, updated, or deleted",
  },
  {
    key: "issue",
    label: "Issues",
    description: "Issue created, updated, deleted, added to a cycle or module",
  },
  {
    key: "module",
    label: "Modules",
    description: "Module created, updated, or deleted",
  },
  {
    key: "issue_comment",
    label: "Issue comments",
    description: "Comment posted, updated, or deleted",
  },
];

type Props = {
  control: Control<IWebhook, any>;
};

export const WebhookIndividualEventOptions = ({ control }: Props) => (
  <div className="grid grid-cols-1 gap-x-4 gap-y-8 px-6 lg:grid-cols-2">
    {INDIVIDUAL_WEBHOOK_OPTIONS.map((option) => (
      <Controller
        key={option.key}
        control={control}
        name={option.key}
        render={({ field: { onChange, value } }) => (
          <div>
            <div className="flex items-center gap-2">
              <input
                id={option.key}
                onChange={() => onChange(!value)}
                type="checkbox"
                name="selectIndividualEvents"
                checked={value === true}
              />
              <label className="text-sm" htmlFor={option.key}>
                {option.label}
              </label>
            </div>
            <p className="ml-6 mt-0.5 text-xs text-custom-text-300">{option.description}</p>
          </div>
        )}
      />
    ))}
  </div>
);