import { Button, Row } from 'antd'
import { RcFile } from 'antd/lib/upload'
import { Icon } from 'components/Icon'
import React, { useCallback, useEffect, useState } from 'react'
import { LazyLoadImage } from 'react-lazy-load-image-component'
import 'react-lazy-load-image-component/src/effects/blur.css'
import { useDispatch } from 'react-redux'
import { MediaUpload } from 'redux/Common/types'
import { useTypedSelector } from 'redux/rootReducer'
import { setTalentProfileAction } from 'redux/User/actions'
import { selectUserData } from 'redux/User/selector'
import { User } from 'redux/User/types'
import { onBeforeUpload } from 'utils/photo'
import { loadImage } from '../../../../utils/image'
import notification from '../../../../utils/notification'
import CustomImageReZoom from './CustomImageReZoom'
import './ProfileCustomImage.scss'
import config from 'config'

interface ProfileCustomImageProps {
  disabled?: boolean
  isUploader?: boolean
}
const ProfileCustomImage = ({}: ProfileCustomImageProps) => {
  const dispatch = useDispatch()
  const user: User | null | undefined = useTypedSelector(selectUserData)
  const [photoUpload, setPhotoUpload] = useState<MediaUpload>()
  const [imageWidthScale, setImageWidthScale] = useState<string>('100%')

  const [src, setSrc] = useState<string>('')

  useEffect(() => {
    if (!user) return
    setPhotoUpload({
      id: 0,
      url: user.talentProfile?.displayNameImage,
      fileName: user.talentProfile?.displayNameImage
    })
    setImageWidthScale(user.talentProfile?.displayNameImageScale || '100%')
  }, [user])

  const updateProfileDisplayNameImage = useCallback(
    (photo: MediaUpload) => {
      dispatch(
        setTalentProfileAction({
          displayNameImage: photo.url
        })
      )
    },
    [dispatch]
  )

  const handleRemoveUpload = () => {
    setPhotoUpload({})
    updateProfileDisplayNameImage({ url: '' })
  }

  const onSetImageWidthScale = (value: string) => {
    setImageWidthScale(value)
    dispatch(
      setTalentProfileAction({
        displayNameImageScale: value
      })
    )
  }

  const handleBeforeCrop = async (file: RcFile) => {
    const data: any = await loadImage(file)
    if (data) {
      if (data.width < 564) {
        notification.error({
          message: 'Your image must be wider than 564 pixels'
        })
        return false
      }
    }
    return onBeforeUpload(file, true)
  }

  const handleClickImage = () => {
    setSrc(photoUpload?.url?.toString() || '')
  }

  return !photoUpload?.url ? null : (
    <Row
      className="profile-custom-image ant-upload--has-data"
      onClick={handleClickImage}
      style={{
        background: `url('${config.service.assetUrl}/assets/images/no-transparent.png')`
      }}
    >
      <CustomImageReZoom
        src={src}
        modalTitle="Crop Image"
        modalOk="Done"
        resizeMaxSize={1024}
        onSetImageWidth={onSetImageWidthScale}
        beforeCrop={handleBeforeCrop}
        defaultZoom={imageWidthScale}
      >
        <LazyLoadImage
          src={photoUpload ? photoUpload.url?.toString() : ''}
          alt="avatar"
          style={{ width: imageWidthScale }}
          effect="blur"
          wrapperClassName="img-wrapper"
        />
      </CustomImageReZoom>
      <Button
        onClick={handleRemoveUpload}
        className="btn-delete btn--circle x-button"
      >
        <Icon name="close-black" />
      </Button>
    </Row>
  )
}
export default ProfileCustomImage
