import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// buzzwareTech imports
import { useTranslation } from "@buzzwaretech/i18n";
import type { IWorkspaceBulkInviteFormData } from "@buzzwaretech/types";
import { EModalPosition, EModalWidth, ModalCore } from "@buzzwaretech/ui";
// components
import { InvitationModalActions } from "@/components/workspace/invite-modal/actions";
import { InvitationFields } from "@/components/workspace/invite-modal/fields";
import { InvitationForm } from "@/components/workspace/invite-modal/form";
// hooks
import { useWorkspaceInvitationActions } from "@/hooks/use-workspace-invitation";

export type TSendWorkspaceInvitationModalProps = {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: IWorkspaceBulkInviteFormData) => Promise<void> | undefined;
};

export const SendWorkspaceInvitationModal = observer(
  function SendWorkspaceInvitationModal(
    props: TSendWorkspaceInvitationModalProps,
  ) {
    const { isOpen, onClose, onSubmit } = props;
    // store hooks
    const { t } = useTranslation();
    // router
    const { workspaceSlug } = useParams();
    // derived values
    const {
      control,
      fields,
      formState,
      remove,
      onFormSubmit,
      handleClose,
      appendField,
    } = useWorkspaceInvitationActions({
      onSubmit,
      onClose,
    });

    return (
      <ModalCore
        isOpen={isOpen}
        position={EModalPosition.TOP}
        width={EModalWidth.XXL}
      >
        <InvitationForm
          title={t("workspace_settings.settings.members.modal.title")}
          description={t(
            "workspace_settings.settings.members.modal.description",
          )}
          onSubmit={onFormSubmit}
          actions={
            <InvitationModalActions
              isSubmitting={formState.isSubmitting}
              handleClose={handleClose}
              appendField={appendField}
            />
          }
          className="p-5"
        >
          <InvitationFields
            workspaceSlug={workspaceSlug.toString()}
            fields={fields}
            control={control}
            formState={formState}
            remove={remove}
          />
        </InvitationForm>
      </ModalCore>
    );
  },
);