import { FLAGS, useFeatureIsOn } from '@komi-app/flags-sdk'
import DragDropContext from 'components/DragDropContext'
import GroupModuleMenu from 'components/GroupModuleMenu'
import { useModules } from 'hooks/useModules'
import React, { useMemo } from 'react'
import { useTypedSelector } from 'redux/rootReducer'
import { selectTalentProfileModules } from 'redux/User/selector'
import AddModule from '../AddModule/AddModule'
import ModulePortal from '../ModulePortal/ModulePortal'
import EmptyModules from '../Modules/EmptyModules'
import { ModuleType } from '@komi-app/meta-profiles'
import { useDigitalProductFeatures } from 'hooks/useDigitalProductFeatures'
import './ModuleList.scss'

interface ModuleListProps {
  showMenu?: boolean
  setShowMenu?: (value: boolean) => void
}

const ModuleList: React.FC<ModuleListProps> = ({ showMenu, setShowMenu }) => {
  const rawModules = useTypedSelector(selectTalentProfileModules)
  const { onDropEndModules, selectedModules } = useModules()
  const isTikTokEnabled = useFeatureIsOn(FLAGS.FEAT_SB_390_TIKTOK_MODULE)
  const isReelsEnabled = useFeatureIsOn(FLAGS.FEAT_SB_421_REELS_MODULE)
  const isMediaGalleryEnabled = useFeatureIsOn(
    FLAGS.FEAT_SB_455_PHOTO_GALLERY_MODULE
  )
  const isAffiliateEnabled = useFeatureIsOn(
    FLAGS.SB_789_ENABLE_AFFILIATE_SCHEME
  )
  const {
    isFreeDownloadOn,
    isPaidDownloadOn,
    isCourseEnabled,
    isOneToOneEnabled
  } = useDigitalProductFeatures()
  const isShortVideoAutomationOn = useFeatureIsOn(FLAGS.SHORT_VIDEO_AUTOMATION)

  const talentProfileModules = useMemo(() => {
    const typesToFilter: ModuleType[] = []

    if (!isTikTokEnabled) {
      typesToFilter.push(ModuleType.TIKTOK_VIDEO)
    }

    if (!isShortVideoAutomationOn) {
      typesToFilter.push(ModuleType.TIKTOK_AUTOMATION)
    }

    if (!isReelsEnabled) {
      typesToFilter.push(ModuleType.INSTAGRAM_REEL)
    }

    if (!isMediaGalleryEnabled) {
      typesToFilter.push(ModuleType.MEDIA_GALLERY)
    }

    if (!isAffiliateEnabled) {
      typesToFilter.push(ModuleType.AFFILIATE)
    }

    if (!isFreeDownloadOn) {
      typesToFilter.push(ModuleType.FREE_DOWNLOAD)
    }

    if (!isPaidDownloadOn) {
      typesToFilter.push(ModuleType.PAID_DOWNLOAD)
    }

    if (!isOneToOneEnabled) {
      typesToFilter.push(ModuleType.ONE_TO_ONE_SESSION)
    }

    if (!isCourseEnabled) {
      typesToFilter.push(ModuleType.COURSE)
    }

    return (rawModules || []).filter(
      module => !typesToFilter.includes(module.type as ModuleType)
    )
  }, [
    rawModules,
    isTikTokEnabled,
    isMediaGalleryEnabled,
    isReelsEnabled,
    isAffiliateEnabled
  ])

  return (
    <React.Fragment>
      {!talentProfileModules?.length ? (
        <EmptyModules showMenu={showMenu} setShowMenu={setShowMenu} />
      ) : (
        <>
          {!selectedModules?.length && <AddModule />}
          <GroupModuleMenu />
          <DragDropContext
            droppableId="modules-drop"
            listClassName="modules-list"
            itemIdPrefix="module"
            list={talentProfileModules || []}
            onDropEndCallback={onDropEndModules}
          >
            {(dragProvided, snapshot, item, index) => (
              <ModulePortal
                key={`${item.groupId ? `${item.groupId}-` : ''}${item.type}-${
                  item.order
                }`}
                provided={dragProvided}
                snapshot={snapshot}
                module={item}
              />
            )}
          </DragDropContext>
        </>
      )}
    </React.Fragment>
  )
}

export default ModuleList
