import React, { useState } from 'react'
import { getImgURL } from '@/utils/image'
import Preview from './Preview'
import Form from './Form'
import Styles from './style.less'

const noop = x => x;

export default (props) => {
  const { target, rights, onCancel = noop } = props
  const { id: targetId, type: targetType } = target

  const [posterImg, setPosterImg] = useState()

  return (
    <div className={Styles['building-poster']}>
      <div className={Styles['poster-preview']}>
        <Preview img={getImgURL(posterImg)} />
      </div>
      <div className={Styles['poster-form']}>
        <Form
          targetId={targetId}
          targetType={targetType}
          rights={rights}
          onImageChange={setPosterImg}
          onCancel={onCancel}
        />
      </div>
    </div>
  )
}