import { Message, MessageSemantic, Semantic } from '@komi-app/creator-ui'
import { useCallback } from 'react'
import { getShortVideoService } from 'services'

interface ReconnectTikTokPromptProps {
  text?: string
}

export const ReconnectTikTokPrompt = ({ text }: ReconnectTikTokPromptProps) => {
  const onReconnectTikTok = useCallback(async () => {
    const url = await getShortVideoService().connectTikTokOAuth()
    window.location.href = url
  }, [])

  return (
    <Message
      semantic={MessageSemantic.WARNING}
      text={
        text ||
        'To keep syncing your TikTok videos automatically, reconnect your TikTok account.'
      }
      buttonProps={{
        label: 'Reconnect TikTok',
        semantic: Semantic.SECONDARY,
        size: 'xsmall',
        onClick: onReconnectTikTok
      }}
    />
  )
}
