import {assets} from "../../assets"
import {ImageView} from "../../atoms"
import {FileUpload} from "../../molecules"
import {ProfileUploadProps} from "../../props"
import styles from "./styles.module.sass"

export const ProfileUpload = ({wrapperClass = "", onChangeData, value, name, disabled}: ProfileUploadProps) => {
  const {attachment, base64} = value || {}

  return (
    <section className={`${wrapperClass} ${styles.profile_upload_container}`}>
      <FileUpload
        wrapperClass={styles.attachment_wrapper}
        disabled={disabled}
        isMultiple={false}
        name={name}
        fileType="image/*"
        onChangeData={onChangeData}
        inputClassName={styles.input_wrapper}>
        <figure className={styles.upload_image}>
          <ImageView
            src={attachment?.url || base64 || assets.ic_profile}
            alt="profile"
            wrapperClass={styles.profile_image}
          />
          {!disabled && (
            <ImageView src={assets.ic_camera} alt="camera" imgSize={24} wrapperClass={styles.camera_wrapper} />
          )}
        </figure>
      </FileUpload>
    </section>
  )
}