import { useState } from 'react';

import _ from 'lodash';
import { LuImageOff } from 'react-icons/lu';

import { TableItemProps } from '../TableItem';

const ImagePreview = (props: { url: string }) => {

    const [error, setError] = useState(false);

    return <div className='relative'>

        {!error && <img
            onError={() => setError(true)}
            className='w-10 h-10 object-cover rounded-md'
            src={props.url}

        />}
        {error && <div className='w-10 h-10 object-cover rounded-md  flex items-center justify-center bg-red-100 dark:bg-red-900'>
            <LuImageOff size={24} className='text-red-300 dark:text-red-700' />
        </div>}
    </div>
}

const FileItem = (props: TableItemProps) => {

    const value = props.value;




    if (props.structure?.type == "fileImage" || props.structure?.type == "fileImageID") {


        if (!value?.url) {

            return <div className='w-10 h-10 flex items-center justify-center opacity-50'>
                <LuImageOff size={24} />
            </div>
        }

        return <ImagePreview url={value?.url_small ?? value?.url_medium ?? value?.url} />

    }

    if (props.structure?.type == "fileImageLink") {

        if (!value) {
            return <div className='w-10 h-10 flex items-center justify-center  opacity-50'>
                <LuImageOff size={24} />
            </div>
        }


        return <ImagePreview url={value} />


    }


    return <div></div>

}

export default FileItem;