import React from 'react'
import { MdOutlineLink as LinkIcon } from 'react-icons/md'

import { TextInput, useToast } from '@komi-app/creator-ui'

import { useCurrentTalentSiteLink } from '../../hooks/useCurrentTalentSiteLink'
import { copyTextToClipboard } from '../../utils/copyTextToClipboard'

import './CurrentTalentSiteLinkCopy.scss'

export function CurrentTalentSiteLinkCopy() {
  const talentSiteLink = useCurrentTalentSiteLink({ hideProtocol: true })
  const talentSiteLinkWithProtocol = useCurrentTalentSiteLink()
  const { createToast } = useToast()

  async function copyLink() {
    await copyTextToClipboard(talentSiteLinkWithProtocol)
    createToast({
      semantic: 'success',
      text: 'Komi link copied to your clipboard.',
      dismissible: true,
      durationMs: 5000
    })
  }

  return <WebLinkCopy siteLink={talentSiteLink} onCopy={copyLink} />
}

interface WebLinkCopyControlProps {
  siteLink: string
  onCopy: () => void
}

function WebLinkCopy({ siteLink, onCopy }: WebLinkCopyControlProps) {
  return (
    <TextInput
      prefixIcon={<LinkIcon size={24} />}
      value={siteLink}
      inputClassName="webLinkCopyInput"
      inputContainerClassName="webLinkCopyContainer"
      onClick={() => onCopy()}
      readOnly
    />
  )
}
