import React from "react";
import { Controller, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { FormGroup, Switch } from "@patternfly/react-core";

import type { ComponentProps } from "./components";
import { HelpItem } from "../help-enabler/HelpItem";

export const BooleanComponent = ({
  name,
  label,
  helpText,
  defaultValue,
}: ComponentProps) => {
  const { t } = useTranslation("dynamic");
  const { control } = useFormContext();

  return (
    <FormGroup
      hasNoPaddingTop
      label={t(label!)}
      fieldId={name!}
      labelIcon={
        <HelpItem helpText={t(helpText!)} fieldLabelId={`dynamic:${label}`} />
      }
    >
      <Controller
        name={`config.${name}`}
        data-testid={name}
        defaultValue={defaultValue}
        control={control}
        render={({ onChange, value }) => (
          <Switch
            id={name!}
            label={t("common:on")}
            labelOff={t("common:off")}
            isChecked={value === "true" || value === true}
            onChange={(value) => onChange("" + value)}
          />
        )}
      />
    </FormGroup>
  );
};