import { useFormContext } from "react-hook-form";
// buzzwareTech imports
import { ETabIndices } from "@buzzwaretech/constants";
import { useTranslation } from "@buzzwaretech/i18n";
import { Button } from "@buzzwaretech/propel/button";
import type { IProject } from "@buzzwaretech/types";
// ui
// helpers
import { getTabIndex } from "@buzzwaretech/utils";

type Props = {
  handleClose: () => void;
  isMobile?: boolean;
};

function ProjectCreateButtons(props: Props) {
  const { t } = useTranslation();
  const { handleClose, isMobile = false } = props;
  const {
    formState: { isSubmitting },
  } = useFormContext<IProject>();

  const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);

  return (
    <div className="flex justify-end gap-2 border-t border-subtle py-4">
      <Button
        variant="secondary"
        size="lg"
        onClick={handleClose}
        tabIndex={getIndex("cancel")}
      >
        {t("common.cancel")}
      </Button>
      <Button
        variant="primary"
        size="lg"
        type="submit"
        loading={isSubmitting}
        tabIndex={getIndex("submit")}
      >
        {isSubmitting ? t("creating") : t("create_project")}
      </Button>
    </div>
  );
}

export default ProjectCreateButtons;