import { useModules } from 'hooks/useModules'
import {
  FanClubItem,
  TalentProfileModule
} from 'models/talent/talent-profile-module.model'
import React, { useCallback, useMemo } from 'react'
import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'
import { useSelector } from 'react-redux'
import { ArrayServices } from 'utils/array'
import FanClubCard from '../../../components/FanClubCard'
import { selectUserData } from '../../../redux/User/selector'
import ModuleEditor from '../ModuleEditor'
import { useAnalyticsCompleteItemCreation } from 'hooks/useAnalyticsCompleteItemCreation'

interface ModuleFanClubProps {
  module: TalentProfileModule<FanClubItem>
  dragHandleProps?: DraggableProvidedDragHandleProps
}

const ModuleFanClub: React.FC<ModuleFanClubProps> = ({
  module,
  dragHandleProps
}) => {
  const profileContext = useModules()
  const user = useSelector(selectUserData)
  const { trackCompleteAddingItemToModule } = useAnalyticsCompleteItemCreation()
  const item = useMemo(() => {
    return module.items[0]
  }, [module.items])

  const onSaveFanClubCallback = useCallback(
    (fanClub: FanClubItem) => {
      const moduleEdit = {
        ...module,
        items: ArrayServices.updateWithIndex(module.items, 0, fanClub),
        isUpdate: true
      }
      profileContext.setModule(moduleEdit)
      trackCompleteAddingItemToModule(moduleEdit)
    },
    [module, profileContext.setModule]
  )

  return (
    <React.Fragment>
      <ModuleEditor module={module} dragHandleProps={dragHandleProps}>
        <FanClubCard
          title={
            user?.talentProfile?.fanClubName ||
            `Join ${user?.talentProfile?.firstName} ${user?.talentProfile?.lastName}’s Fan Club`
          }
          subTitle={
            user?.talentProfile?.fanClubBenefits || 'Exclusive benefits'
          }
          image={item.thumbnail}
          onSaveFanClub={onSaveFanClubCallback}
        />
      </ModuleEditor>
    </React.Fragment>
  )
}

export default React.memo(ModuleFanClub)
