import classNames from "classnames";
import PortalComponent from "components/PortalComponent/PortalComponent";
import {
  TalentModuleMixItem,
  TalentProfileModule,
} from "models/talent/talent-profile-module.model";
import React from "react";
import { FLAGS, useFeatureIsOn } from "@komi-app/flags-sdk";
import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
import { useDispatch } from "react-redux";
import { useTypedSelector } from "redux/rootReducer";
import { setActiveModuleAction } from "redux/Talent/actions";
import { selectActiveModule } from "redux/Talent/selector";
import ModuleEditor from "../ModuleEditor";
import ModuleBandsintown from "../Modules/ModuleBandsintown";
import ModuleDataCaptureForm from "../Modules/ModuleDataCaptureForm";
import ModuleDigitalProduct from "../Modules/ModuleDigitalProduct";
import ModuleEvents from "../Modules/ModuleEvents";
import ModuleExperience from "../Modules/ModuleExperience";
import ModuleFanClub from "../Modules/ModuleFanClub";
import ModuleGroup from "../Modules/ModuleGroup";
import ModuleLink from "../Modules/ModuleLink";
import ModuleMusic from "../Modules/ModuleMusic";
import ModuleOndemandVideo from "../Modules/ModuleOndemandVideo";
import ModulePodcast from "../Modules/ModulePodcast";
import ModuleProduct from "../Modules/ModuleProduct";
import ModuleShopify from "../Modules/ModuleShopify";
import ModuleShopList from "../Modules/ModuleShopList";
import ModuleShopMyShelf from "../Modules/ModuleShopMyShelf";
import ModuleSmartPodcast from "../Modules/ModuleSmartPodcast";
import ModuleYoutube from "../Modules/ModuleYoutube";
import ModuleYoutubeVideo from "../Modules/ModuleYoutubeVideo";
import ModuleSeated from "../Modules/ModuleSeated";
import ModuleDataCaptureActivation from "../Modules/ModuleDataCaptureActivation";
import RyeModuleShopify from "../Modules/RyeModuleShopify";
import ModuleTikTok from "../Modules/ModuleTikTok";
import ModuleMediaGallery from "../Modules/ModuleMediaGallery";
import ModuleInstagramReels from "../Modules/ModuleInstagramReels";
import ModuleYoutubeShort from "../Modules/ModuleYoutubeShort";
import ModuleText from "../Modules/ModuleText";
import ModuleAffiliate from "../Modules/ModuleAffiliate";
import { ModuleType } from "@komi-app/shared-types";
import ModuleTikTokAutomation from "../Modules/ModuleTikTokAutomation";

interface ModulePortalProps<T> {
  provided: DraggableProvided;
  snapshot: DraggableStateSnapshot;
  module: TalentProfileModule<T>;
}

const ModulePortal: React.FC<ModulePortalProps<TalentModuleMixItem>> = ({
  module,
  snapshot,
  provided,
}) => {
  const dispatch = useDispatch();
  const activeModule = useTypedSelector(selectActiveModule);
  const onModuleClick = (event: any) => {
    event.stopPropagation();
    dispatch(setActiveModuleAction(module.id));
  };
  const isNewPodcastEnabled = useFeatureIsOn(FLAGS.NEW_PODCAST);
  const isNewYoutubeEnabled = useFeatureIsOn(FLAGS.NEW_YOUTUBE);
  const isTikTokEnabled = useFeatureIsOn(FLAGS.FEAT_SB_390_TIKTOK_MODULE);
  const isReelsEnabled = useFeatureIsOn(FLAGS.FEAT_SB_421_REELS_MODULE);
  const isShortVideoAutomationEnabled = useFeatureIsOn(
    FLAGS.SHORT_VIDEO_AUTOMATION
  );
  const isAffiliateEnabled = useFeatureIsOn(
    FLAGS.SB_789_ENABLE_AFFILIATE_SCHEME
  );
  const isFreeDigitalProductEnabled = useFeatureIsOn(
    FLAGS.FREE_DOWNLOADS_TALENT
  );
  const isPaidDigitalProductEnabled = useFeatureIsOn(
    FLAGS.PAID_DIGITAL_PRODUCT
  );

  let ModuleComponent: any = ModuleEditor;
  switch (module.type) {
    case ModuleType.LINK:
      ModuleComponent = ModuleLink;
      break;
    case ModuleType.EXPERIENCE:
      ModuleComponent = ModuleExperience;
      break;
    case ModuleType.ON_DEMAND_VIDEO:
      ModuleComponent = ModuleOndemandVideo;
      break;
    case ModuleType.PRODUCT:
      ModuleComponent = ModuleProduct;
      break;
    case ModuleType.MUSIC:
      ModuleComponent = ModuleMusic;
      break;
    case ModuleType.PODCAST:
    case ModuleType.PODCAST_AUTOMATION:
    case ModuleType.PODCAST_SELECT:
      ModuleComponent = isNewPodcastEnabled
        ? ModuleSmartPodcast
        : ModulePodcast;
      break;
    case ModuleType.YOUTUBE_VIDEO:
    case ModuleType.YOUTUBE_COLLECTION:
    case ModuleType.YOUTUBE:
      ModuleComponent = isNewYoutubeEnabled
        ? ModuleYoutube
        : ModuleYoutubeVideo;
      break;
    case ModuleType.YOUTUBE_SHORT:
      //TODO: Change to New type when we support channel/playlist links
      ModuleComponent = ModuleYoutubeShort;
      break;
    case ModuleType.TIKTOK_VIDEO:
      if (!isTikTokEnabled) break;
      ModuleComponent = ModuleTikTok;
      break;
    case ModuleType.TIKTOK_AUTOMATION:
      if (!isTikTokEnabled || !isShortVideoAutomationEnabled) break;
      ModuleComponent = ModuleTikTokAutomation;
      break;
    case ModuleType.INSTAGRAM_REEL:
      if (!isReelsEnabled) break;
      ModuleComponent = ModuleInstagramReels;
      break;
    case ModuleType.FAN_CLUB:
      ModuleComponent = ModuleFanClub;
      break;
    case ModuleType.BANDSINTOWN:
      ModuleComponent = ModuleBandsintown;
      break;
    case ModuleType.SEATED:
      ModuleComponent = ModuleSeated;
      break;
    case ModuleType.SHOPIFY:
    case ModuleType.SHOPIFY_PRODUCT:
    case ModuleType.SHOPIFY_COLLECTION:
      ModuleComponent = ModuleShopify;
      break;
    case ModuleType.RYE_SHOPIFY:
    case ModuleType.RYE_SHOPIFY_PRODUCT:
    case ModuleType.RYE_SHOPIFY_COLLECTION:
      ModuleComponent = RyeModuleShopify;
      break;
    case ModuleType.EVENTS:
      ModuleComponent = ModuleEvents;
      break;
    case ModuleType.FORM_DATA:
      ModuleComponent = ModuleDataCaptureForm;
      break;
    case ModuleType.GROUP:
      ModuleComponent = ModuleGroup;
      break;
    case ModuleType.SHOP_MY_SHELF:
      ModuleComponent = ModuleShopMyShelf;
      break;
    case ModuleType.SHOP_LIST:
      ModuleComponent = ModuleShopList;
      break;
    case ModuleType.DATA_CAPTURE_COUPON_CODE:
    case ModuleType.DATA_CAPTURE_SECRET_LINK:
    case ModuleType.DATA_CAPTURE_SIGNUP:
      ModuleComponent = ModuleDataCaptureActivation;
      break;
    case ModuleType.MEDIA_GALLERY:
      ModuleComponent = ModuleMediaGallery;
      break;
    case ModuleType.TEXT:
      ModuleComponent = ModuleText;
      break;
    case ModuleType.AFFILIATE:
      if (!isAffiliateEnabled) break;
      ModuleComponent = ModuleAffiliate;
      break;
    case ModuleType.DIGITAL_PRODUCT:
      ModuleComponent = ModuleDigitalProduct;
      break;
    default:
      break;
  }
  const isActive =
    module.id === activeModule ||
    (module.type === ModuleType.GROUP &&
      module.items.some((el: any) => el.id === activeModule));

  return (
    <PortalComponent
      namespaceClass={module.groupId ? "module-group-list" : "module-list"}
      provided={provided}
      snapshot={snapshot}
    >
      <div
        id={module.id}
        onClick={onModuleClick}
        className={classNames(
          module.groupId ? "module-group-item-wrapper" : "module-item-wrapper",
          {
            active: isActive,
          }
        )}
      >
        <ModuleComponent
          module={module}
          active={isActive}
          dragHandleProps={provided.dragHandleProps}
        />
      </div>
    </PortalComponent>
  );
};

export default React.memo(ModulePortal);
