import { useTranslation } from "@buzzwaretech/i18n";
import { observer } from "mobx-react";
import Link from "next/link";
// ui
import { Button, getButtonStyling } from "@buzzwaretech/propel/button";
import { Logo } from "@buzzwaretech/propel/emoji-icon-picker";
import { Row } from "@buzzwaretech/ui";
// components
// hooks
import { useProject } from "@/hooks/store/use-project";
// buzzwareTech web imports
import { ProjectFeaturesList } from "@/buzzwareTech-web/components/projects/settings/features-list";

type Props = {
  workspaceSlug: string;
  projectId: string | null;
  onClose: () => void;
};

export const ProjectFeatureUpdate = observer(function ProjectFeatureUpdate(
  props: Props,
) {
  const { workspaceSlug, projectId, onClose } = props;
  // store hooks
  const { t } = useTranslation();
  const { getProjectById } = useProject();

  if (!workspaceSlug || !projectId) return null;
  const currentProjectDetails = getProjectById(projectId);
  if (!currentProjectDetails) return null;

  return (
    <>
      <Row className="py-6">
        <ProjectFeaturesList
          workspaceSlug={workspaceSlug}
          projectId={projectId}
          isAdmin
        />
      </Row>
      <div className="mt-4 flex items-center justify-between gap-2 border-t border-subtle px-6 py-4">
        <div className="flex gap-1 text-13 font-medium text-tertiary">
          {t("congrats")}
          <Logo logo={currentProjectDetails.logo_props} />{" "}
          <p className="break-all">{currentProjectDetails.name}</p>{" "}
          {t("created").toLowerCase()}.
        </div>
        <div className="flex gap-2">
          <Button variant="secondary" size="lg" onClick={onClose} tabIndex={1}>
            {t("close")}
          </Button>
          <Link
            href={`/${workspaceSlug}/projects/${projectId}/issues`}
            onClick={onClose}
            className={getButtonStyling("primary", "lg")}
            tabIndex={2}
          >
            {t("open_project")}
          </Link>
        </div>
      </div>
    </>
  );
});