import { useState } from 'react';

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

import { cn } from '@/lib/utils';

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

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

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

    return <div className='relative'>

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

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

const FileItem = (props: TableItemProps) => {

    const value = props.value;
    const imageClass = props.boardTokens?.imagePreviewClass ?? 'w-10 h-10';
    const placeholderIconSize = props.boardTokens?.imagePlaceholderIconSize ?? 24;




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


        if (!value?.url) {

            return <div className={cn(imageClass, 'flex items-center justify-center opacity-50')}>
                <LuImageOff size={placeholderIconSize} />
            </div>
        }

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

    }

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

        if (!value) {
            return <div className={cn(imageClass, 'flex items-center justify-center opacity-50')}>
                <LuImageOff size={placeholderIconSize} />
            </div>
        }


        return <ImagePreview url={value} className={imageClass} />


    }


    return <div></div>

}

export default FileItem;
