import React, {ReactNode, useState} from 'react';
import plus from '../../../assets/images/plus-sign.svg'
import garbage from '../../../assets/images/garbage-blue.png'
import download from '../../../assets/images/download-arrow.svg'
import view from '../../../assets/images/view.svg'
import lock from '../../../assets/images/lock.svg'
import unlock from '../../../assets/images/padlock-unlock.svg'
import './deltiobox.scss';

type UploadBoxProps = {
    accept?: string
    text: string
    isLocked: boolean
    hasFile: boolean
    onChange?: (f: any) => void
    onDelete?: () => void
    onDownload?: () => void
    onPreview?: () => void
    onLock?: () => void
    canEdit: boolean
    children?: ReactNode //THE CHILD COMPONENT IS SHOWN WHEN THERES A FILE UPLOADED
}

const UploadBox = ({
                       accept,
                       text,
                       onChange,
                       hasFile,
                       onDelete,
                       onDownload,
    onPreview,
                       onLock,
                       isLocked,
                       canEdit,
                       children
                   }: UploadBoxProps) => {

    return (
        <div className={`deltio-box ${hasFile && 'hasDeltio'} ${isLocked && 'isLocked'}`}>


            {/*@ts-ignore*/}
            {!hasFile && canEdit && <input type="file" id={'file'} accept={accept} onChange={(e) => onChange(e.target.files[0])}/>}


            <div className={'inner-deltio'}>


                {/*CONTENT*/}
                {
                    !hasFile &&
                    <div className="content">
                        {
                            canEdit && !hasFile && <img src={plus} alt="" className={'add'}/>
                        }

                        {/*{*/}
                        {/*    canEdit && isLocked && <img src={lock} alt="" className={'lock'}/>*/}
                        {/*}*/}

                        <p className={'year-month'}> {text}</p>

                    </div>
                }


                {/*CONTENT ON HOVER*/}
                {
                    hasFile &&
                    <div className="hoverable">
                        {
                            canEdit && !isLocked && onDelete &&
                            <div onClick={onDelete}>
                                <img src={garbage} alt=""/>
                                <span>DELETE</span>
                            </div>
                        }


                        <div onClick={onDownload}>
                            <img src={download} alt=""/>
                            <span>DOWNLOAD</span>
                        </div>

                            <div onClick={onPreview}>
                                <img src={view} alt=""/>
                                <span>PREVIEW</span>
                            </div>





                        {
                            canEdit && onLock &&
                            <div onClick={onLock}>
                                <img src={isLocked? lock : unlock} alt=""/>
                                <span>{isLocked ? 'UNLOCK' :'LOCK'}</span>
                            </div>
                        }

                    </div>
                }

                {
                    hasFile &&
                    <div className="uploaded">
                        {children}
                    </div>
                }

            </div>
            {/*{text}*/}
        </div>
    );
}

export default UploadBox;