import { FC, useCallback, useMemo } from 'react';
import { GetConfigurationValue, useUiSettings } from '../../api';

export const InterfaceImageTabView: FC<{}> = () =>
{
    const { settings, updateSettings } = useUiSettings();

    const imageCount = useMemo(() =>
    {
        return GetConfigurationValue<number>('ui.header.images.count', 30);
    }, []);

    const baseUrl = useMemo(() =>
    {
        return GetConfigurationValue<string>('ui.header.images.url', '');
    }, []);

    const images = useMemo(() =>
    {
        const result: string[] = [];
        for(let i = 1; i <= imageCount; i++)
        {
            result.push(baseUrl.replace('{id}', String(i)));
        }
        return result;
    }, [ imageCount, baseUrl ]);

    const onImageSelect = useCallback((url: string) =>
    {
        updateSettings({
            colorMode: 'image',
            headerImageUrl: url
        });
    }, [ updateSettings ]);

    return (
        <div className="grid grid-cols-8 gap-1 p-2 overflow-auto max-h-[400px]">
            { images.map((url, i) => (
                <div
                    key={ i }
                    className={ `w-[75px] h-[75px] rounded cursor-pointer border-2 transition-all hover:scale-105 ${ (settings.colorMode === 'image' && settings.headerImageUrl === url) ? 'border-white shadow-lg' : 'border-transparent' }` }
                    style={ {
                        backgroundImage: `url(${ url })`,
                        backgroundSize: 'cover',
                        backgroundPosition: 'center'
                    } }
                    onClick={ () => onImageSelect(url) }
                />
            )) }
        </div>
    );
};