import React from "react";
import { TalentButton, Typography } from "@komi-app/components";
import { FormProvider, useForm } from "react-hook-form";
import { ControlledPillInput } from "./ControlledPillInput";

export function ApprovedDomainsForm({
  defaultApprovedDomains,
  onApprovedDomainsChange,
  close,
}: {
  defaultApprovedDomains: string[];
  onApprovedDomainsChange(approvedDomains: string[] | null): any;
  close: () => void;
}) {
  const useFormResult = useForm<{
    approvedDomains: string[];
  }>({
    defaultValues: {
      approvedDomains: defaultApprovedDomains,
    },
  });

  const { handleSubmit, register } = useFormResult;

  return (
    <FormProvider {...useFormResult}>
      <form
        onSubmit={handleSubmit((values) => {
          onApprovedDomainsChange(values.approvedDomains);
        })}
      >
        <div className="p__t--24">
          <Typography.Body level={1} className="p__b--24">
            Enter every domain you want to add the form to below. You can always
            your selection later.
          </Typography.Body>

          <ControlledPillInput
            register={register("approvedDomains")}
            title="Trusted domains"
          />
        </div>

        <div className="email-domain-setup-modal-info-step__actions flex justify__content--end gap--16 m__t--24">
          <TalentButton variant="secondary" onClick={close}>
            CANCEL
          </TalentButton>
          <TalentButton variant="primary" type="submit">
            ADD DOMAINS
          </TalentButton>
        </div>
      </form>
    </FormProvider>
  );
}
