import { extractColors } from 'extract-colors';

// Manages image color extraction
export class ExtractColors {
    // loads all images into img elements
    static loadImages = async (imageFiles: File[]): Promise<HTMLImageElement[]> => {
        try {
            const imageElements = await Promise.all(imageFiles.map(file => this.loadImage(file)));
            return imageElements;
        } catch (error) {
            console.error(error);
            return [];
        }
    };

    // loads a single img into an img element
    static loadImage = (file: File): Promise<HTMLImageElement> => {
        return new Promise((resolve, reject) => {
            const img = new Image();

            img.onload = () => resolve(img);
            img.onerror = error => reject(error);

            const url = URL.createObjectURL(file);
            img.src = url;
        });
    };

    // loads all images into img elements
    static loadImagesUrl = async (imageUrls: string[]): Promise<HTMLImageElement[]> => {
        try {
            const imageElements = await Promise.all(imageUrls.map(url => this.loadImageUrl(url)));
            return imageElements;
        } catch (error) {
            console.error(error);
            return [];
        }
    };

    // loads a single img into an img element
    static loadImageUrl = (url: string): Promise<HTMLImageElement> => {
        return new Promise((resolve, reject) => {
            const img = new Image();

            img.onload = () => resolve(img);
            img.onerror = error => reject(error);

            img.src = url;
        });
    };

    // extracts a list of collors from an img element
    static getImgColors = async (img: HTMLImageElement) => {
        const colors = await extractColors(img, { distance: 0.35 });
        return colors;
    };
}