/**
 * Copyright (c) 2023-present Pi Dash Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { observer } from "mobx-react";
import Link from "next/link";
import { useTranslation } from "@pi-dash/i18n";
// ui
import { Button, getButtonStyling } from "@pi-dash/propel/button";
import { Logo } from "@pi-dash/propel/emoji-icon-picker";
import { Row } from "@pi-dash/ui";
// components
// hooks
import { useProject } from "@/hooks/store/use-project";
// pi dash web imports
import { ProjectFeaturesList } from "@/pi-dash-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>
    </>
  );
});
