import React from "react";
import { PillInputNew } from "@komi-app/components";
import { Controller, UseFormRegisterReturn } from "react-hook-form";
import { isValidDomainName } from "../utils/is-valid-domain-name";

import { isOn, FLAGS } from "@komi-app/flags-sdk";

export function ControlledPillInput({
  register,
  title,
}: {
  register: UseFormRegisterReturn<string>;
  title?: string;
}) {
  return (
    <Controller
      {...register}
      render={({ field, fieldState }) => (
        <div className="p--t__16">
          <PillInputNew
            {...field}
            values={field.value}
            onValuesChanged={field.onChange}
            errorMessage={fieldState.error?.message}
            title={title}
            validateInput={(value) =>
              isValidDomainName(value.trim()) || !Boolean(value)
                ? undefined
                : "Invalid domain name"
            }
          />
        </div>
      )}
    />
  );
}
