import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { MessageFu } from '@/utils/message'
import closeImg from '@/assets/img/close.png'

type Props = {
  isShowType: '分享' | '介绍' | ''
  closeFu: () => void
}

function Share({ isShowType, closeFu }: Props) {
  const [url, setUrl] = useState('')
  useEffect(() => {
    setUrl(window.location.href.replace('index.html', 'show.html').replace('#/', ''))
  }, [])

  const btnOk = useCallback(() => {
    const input = document.createElement('input')
    const body = document.body
    body.appendChild(input)
    input.value = url
    input.select()
    document.execCommand('copy')
    body.removeChild(input)

    MessageFu.success('复制成功')
    closeFu()
  }, [closeFu, url])

  return (
    <div
      className={styles.Share}
      style={{ opacity: isShowType ? '1' : '0', pointerEvents: isShowType ? 'auto' : 'none' }}
    >
      {isShowType === '分享' ? (
        <div className='sharBox'>
          <p>分享链接给好友</p>
          <div className='sharLink'>{url}</div>

          <div className='sharBtn'>
            <span onClick={closeFu}>取消</span>
            <span className='sharBtnOk' onClick={btnOk}>
              一键复制
            </span>
          </div>
        </div>
      ) : isShowType === '介绍' ? (
        <div className='textBox'>
          <div className='textBoxSon' dangerouslySetInnerHTML={{ __html: myText }}></div>
          <img onClick={closeFu} className='textClose' src={closeImg} alt='' />
        </div>
      ) : null}
    </div>
  )
}

const MemoShare = React.memo(Share)

export default MemoShare
