import {
  TalentProfileModule,
  TikTokAutomationItem
} from 'models/talent/talent-profile-module.model'
import React, { useMemo } from 'react'
import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'
import ModuleTikTokSemiAutomated from './ModuleTikTokSemiAutomated'
import ModuleTikTokFullyAutomated from './ModuleTikTokFullyAutomated'
import { AutomationMode } from '@komi-app/profiles-sdk'

export interface ModuleTikTokAutomationProps {
  module: TalentProfileModule<TikTokAutomationItem>
  dragHandleProps?: DraggableProvidedDragHandleProps
  active: boolean
}

const ModuleTikTokAutomation: React.FC<ModuleTikTokAutomationProps> = props => {
  const { module } = props

  const SubComponent = useMemo(() => {
    if (module.items.length === 0) {
      return null
    }

    if (module.items[0].mode === AutomationMode.SEMIAUTO) {
      return ModuleTikTokSemiAutomated
    }
    return ModuleTikTokFullyAutomated
  }, [module.items])

  if (!SubComponent) {
    return null
  }

  return <SubComponent {...props} />
}

export default React.memo(ModuleTikTokAutomation)
