import { Col, Row } from 'antd'
import classNames from 'classnames'
import * as React from 'react'
import { useCallback, useEffect, useState } from 'react'
import { isMobile } from 'react-device-detect'
import { MediaUpload } from 'redux/Common/types'
import { Paragraph } from '../Typography'
import CoverUpload from './CoverUpload/CoverUpload'
import './FanClubCard.scss'
interface FanClubCardProps {
  title?: string
  subTitle?: string
  image?: string
  onSaveFanClub?: (data: any) => void
}

const FanClubCard = ({
  title,
  subTitle,
  image,
  onSaveFanClub
}: FanClubCardProps) => {
  const [photo, setPhoto] = useState<MediaUpload>({})

  useEffect(() => {
    setPhoto({ url: image })
  }, [])
  const uploadPhotoSuccess = useCallback(
    (file: MediaUpload) => {
      setPhoto(file)
      const data = {
        order: 0,
        thumbnail: file.url
      }
      onSaveFanClub?.(data)
    },
    [onSaveFanClub]
  )
  const removePhoto = useCallback(() => {
    setPhoto({})
    const data = {
      order: 0,
      thumbnail: ''
    }
    onSaveFanClub?.(data)
  }, [onSaveFanClub])
  return (
    <div className="fan-club-card">
      <Row align="middle">
        <Col flex={'1'}>
          <Paragraph
            preset={isMobile ? 'bold24' : 'bold32'}
            className={classNames(
              'fan-club-card__title m__b--8',
              !isMobile && 'leading-42'
            )}
          >
            {title}
          </Paragraph>
          <Paragraph
            className="m__b--8 opacity--80 fan-club-card__title"
            preset={isMobile ? 'regular14' : 'regular18'}
          >
            {subTitle}
          </Paragraph>
        </Col>
        <Col>
          <CoverUpload
            photo={photo}
            onUploadSuccess={uploadPhotoSuccess}
            onRemove={removePhoto}
          />
        </Col>
      </Row>
    </div>
  )
}

export default FanClubCard
