import React, { useRef } from 'react';
import JDIcon from '../icons/Icons';
import { IuseFilesManager } from '../../hooks/hook';
import { ISpan } from '../../types/interface';

const uploadHiddenStyle: React.CSSProperties = {
    overflow: 'hidden',
    opacity: 0,
    width: '1px',
    position: "absolute",
    top: 0,
    left: 0,
    height: '1px',
}

export interface IUploadIconProp {
    uploader?: IuseFilesManager;
    cooldinate?: {
        left?: number,
        top?: number,
        bottom?: number,
        rihgt?: number
    }
}

export interface IconUploaderProp extends ISpan, IUploadIconProp {

}

export const IconUploader: React.FC<IconUploaderProp> = ({ uploader, cooldinate, className, ...props }) => {
    const hiddenUploader = useRef<HTMLInputElement>(null)

    return <span
        className={`iconUploader ${className}`}
        style={{
            overflow: 'hidden',
            position: "absolute",
            ...cooldinate
        }}
        onClick={() => {
            hiddenUploader.current?.click()
        }}
        {...props}
    >
        <span className="iconUploader__inner">
            <JDIcon color="black" size="superTiny" icon="camera" />
        </span>
        {uploader && (
            <div
                style={uploadHiddenStyle}
            >
                <input
                    style={{
                        position: 'absolute',
                        opacity: 0,
                        width: '1px',
                        height: '1px',
                    }}
                    type="file"
                    onChange={uploader.onChangeFile}
                    ref={hiddenUploader}
                />
            </div>
        )}
    </span>;
};

export default IconUploader;