import type { IFieldBase } from './field.types'; import { FieldBase } from './field.types'; 

export interface IImage extends IFieldBase {
    multiple?: boolean, // optional
    showPreview?: boolean, // optional
}

export class ImageModel extends FieldBase implements IImage {
    
    type = "image";
    subType = "image" 
    // component = Image;
    multiple = true; 
    showPreview = true;
    
    validation = [
        {
            action: 'file',
            message: 'This file is not valid.' 
        }
    ]; 

    constructor(image: Partial<IImage>) {
        super(image);
        this.validation = [ ...this.validation, ...(image.validation || []) ]; 
        this.multiple = image.multiple || this.multiple; 
        this.showPreview = image.showPreview || this.showPreview; 
    }
}

export type ImageEditContext = {
    
    retries: number;
    files: File[];
    active: File;

    // file: File;
    maxWidth: number;
    maxHeight: number;

    // preview elements - canvas and it's container
    previewContainer: any;
    previewCanvas: any;
    previewTransform: DOMMatrix;

    // render elements - canvas and image 
    renderImage: HTMLImageElement;
    renderCanvas: any;
    renderTransform: DOMMatrix;

    // current state of canvas contexts 
    
    orientation: string,
    
    previewX: number;
    previewY: number; 
    previewWidth: number;
    previewHeight: number;

    lastPreviewX: number;
    lastPreviewY: number;
    lastRenderX: number;
    lastRenderY: number;
    dragStartPreview: any;
    dragStartRender: any

    renderX: number;
    renderY: number; 
    renderWidth: number;
    renderHeight: number;

    aspectRatio: number;
    src: string;
    rotation: number;
};

export type ImageEditEvent = 
    { type: 'FETCH' } | 
    { type: 'SUCCESS'; files: File[] } | 
    { type: 'SELECT'; file: File  } |
    { 
        type: 'EDITING_CANVASSES'; 
        context: { 
            file: File, 
            renderImage: HTMLImageElement,
            renderCanvas: HTMLCanvasElement, 
            previewCanvas: HTMLCanvasElement, 
            previewContainer: HTMLDivElement, 
            maxWidth: number, 
            maxHeight: number 
        } 
    } | 
    { type: 'UPLOAD' } |
    { type: 'REMOVE'; name: string } | 
    { type: 'RESAMPLE' } |
    { type: 'ZOOM' } |
    { type: 'ZOOMING' } |
    { type: 'STOP_ZOOM' } |
    { type: 'DRAG' } |
    { type: 'DRAGGING' } |
    { type: 'STOP_DRAG' } |
    { type: 'TEXT' } |
    { type: 'ROTATE_LEFT' } |
    { type: 'ROTATE_RIGHT' } |
    { type: 'ROTATE' } |
    { type: 'CROP' } |
    { type: 'RESIZE' } |
    { type: 'FLIP' } |
    { type: 'FLOP' } |
    { type: 'FILTER' } |
    { type: 'DONE' } |
    { type: 'RESOLVE' } | 
    { type: 'REJECT' } | 
    { type: 'RETRY' } |
    { type: 'CANCEL' } |
    { type: 'SAVE'; file: File | null };