import { EModalPosition, EModalWidth, ModalCore } from "@buzzwaretech/ui";
import { checkURLValidity, getAssetIdFromUrl } from "@buzzwaretech/utils";
import { useEffect, useState } from "react";
// buzzwareTech ui
// helpers
// hooks
import useKeypress from "@/hooks/use-keypress";
// buzzwareTech web components
import { CreateProjectForm } from "@/buzzwareTech-web/components/projects/create/root";
// buzzwareTech web types
import type { TProject } from "@buzzwaretech/types";
// services
import { FileService } from "@/services/file.service";
import { ProjectFeatureUpdate } from "./project-feature-update";
const fileService = new FileService();

type Props = {
  isOpen: boolean;
  onClose: () => void;
  setToFavorite?: boolean;
  workspaceSlug: string;
  data?: Partial<TProject>;
  templateId?: string;
};

enum EProjectCreationSteps {
  CREATE_PROJECT = "CREATE_PROJECT",
  FEATURE_SELECTION = "FEATURE_SELECTION",
}

export function CreateProjectModal(props: Props) {
  const {
    isOpen,
    onClose,
    setToFavorite = false,
    workspaceSlug,
    data,
    templateId,
  } = props;
  // states
  const [currentStep, setCurrentStep] = useState<EProjectCreationSteps>(
    EProjectCreationSteps.CREATE_PROJECT,
  );
  const [createdProjectId, setCreatedProjectId] = useState<string | null>(null);

  useEffect(() => {
    if (isOpen) {
      setCurrentStep(EProjectCreationSteps.CREATE_PROJECT);
      setCreatedProjectId(null);
    }
  }, [isOpen]);

  const handleNextStep = (projectId: string) => {
    if (!projectId) return;
    setCreatedProjectId(projectId);
    setCurrentStep(EProjectCreationSteps.FEATURE_SELECTION);
  };

  const handleCoverImageStatusUpdate = async (
    projectId: string,
    coverImage: string,
  ) => {
    if (!checkURLValidity(coverImage)) {
      await fileService.updateBulkProjectAssetsUploadStatus(
        workspaceSlug,
        projectId,
        projectId,
        {
          asset_ids: [getAssetIdFromUrl(coverImage)],
        },
      );
    }
  };

  useKeypress("Escape", () => {
    if (isOpen) onClose();
  });

  return (
    <ModalCore
      isOpen={isOpen}
      position={EModalPosition.TOP}
      width={EModalWidth.XXXXL}
    >
      {currentStep === EProjectCreationSteps.CREATE_PROJECT && (
        <CreateProjectForm
          setToFavorite={setToFavorite}
          workspaceSlug={workspaceSlug}
          onClose={onClose}
          updateCoverImageStatus={handleCoverImageStatusUpdate}
          handleNextStep={handleNextStep}
          data={data}
          templateId={templateId}
        />
      )}
      {currentStep === EProjectCreationSteps.FEATURE_SELECTION && (
        <ProjectFeatureUpdate
          projectId={createdProjectId}
          workspaceSlug={workspaceSlug}
          onClose={onClose}
        />
      )}
    </ModalCore>
  );
}