export interface CustomizationOptions {
    template: Template;
    options: (DropdownOption | SwatchOption | TextInputOption | ImageUploadOption)[];
    baseUrl: string;
    breadcrumbs: {
        id: number;
        name: string;
        slug: string,
        _lft: number,
        _rgt: number,
        url: string
    }[]
}

export interface Condition {
    combinationOperator: string;
    action: string;
    watchOptionId: string | number;
    desiredValue: string | number | string[] | number[];
}

export interface FunctionItem {
    type: string;
    elementId?: number | string;
}

export interface DropdownValue {
    id: number | string;
    selected?: boolean;
    order: number;
    sortId: number;
    valueName: string;
    value: number | string;
    imageId: number | string;
    fontId: number | string;
    colorId: number | string;
    vectorId: number | string;
    templateId: number | string;
    groupId: number | string;
}

export interface SwatchValue {
    id: number | string;
    selected?: boolean;
    order: number;
    sortId: number;
    valueName: string;
    value: number | string;
    thumbColor: string;
    thumbImage: string;
    imageId: number | string;
    fontId: number | string;
    colorId: number | string;
    vectorId: number | string;
    templateId: number | string;
    groupId: number | string;
}

export interface DropdownOption {
    id: number;
    type: string;
    label: string;
    functionItems: FunctionItem[];
    conditions: Condition[];
    hideVisually: boolean;
    isShow: boolean;
    dropdownValues: DropdownValue[];
    currentValue: number | string;
}

export interface SwatchOption {
    id: number;
    type: string;
    label: string;
    functionItems: FunctionItem[];
    conditions: Condition[];
    hideVisually: boolean;
    isShow: boolean;
    swatchValues: SwatchValue[];
    currentValue: number | string;
}

export interface TextInputOption {
    id: number;
    type: string;
    label: string;
    functionItems: FunctionItem[];
    conditions: Condition[];
    hideVisually: boolean;
    config?: {
        placeholder?: string;
        maxLength?: number;
        initialValue?: string;
    };
    isShow: boolean;
    currentValue: number | string;
}

export interface ImageUploadOption {
    id: number;
    type: string;
    label: string;
    functionItems: FunctionItem[];
    conditions: Condition[];
    hideVisually: boolean;
    config?: {
        buttonText?: string,
        helpText?: string
    };
    fileUploadImageId: string | number;
    isShow: boolean;
    currentValue: number | string;
}

export interface DynamicImageElement {
    id: number | string;
    uid: string;
    elementId: string;
    name: string;
    type: string;
    order: number;
    isShow: boolean;
    groupId: string;
    config: {
        sWidth: number;
        sHeight: number;
        centerX: number;
        centerY: number;
        rotation: number;
        locked: boolean;
        scale: number;
        maskPath: string | null;
        images: {
            order: number;
            value: string
        }[];
        libraryId: string | number;
        librarySegmentId: string | number;
        imageId: string | number;
        fontId: string | number;
        colorId: string | number;
        vectorId: string | number;
        childElementIds: string|number[];
        dependentElementId: string | number | null;
        grading: boolean;
        fullColor: boolean;
        imageUrl: string;
        editable: boolean;
        staticPath: string;
        coverMaskArea: boolean;
        evented: boolean;
    };
    grading: boolean;
    fullColor: boolean;
    templateId: number;
    childElementIds: string|number[];
    dependentElementId: string | number | null;
    visible: boolean;
    isChange?: boolean;
    opacity: number;
}

export interface TextInputElement {
    id: number | string;
    uid: string;
    elementId: string;
    name: string;
    type: string;
    order: number;
    isShow: boolean;
    groupId: string;
    config: {
        sWidth: number;
        sHeight: number;
        centerX: number;
        centerY: number;
        rotation: number;
        locked: boolean;
        scale: number;
        colors: {
            order: number;
            value: string
        }[];
        fonts: {
            order: number;
            value: string
        }[];
        colorLibraryId: string | number;
        fontLibraryId: string | number;
        childElementIds: string|number[];
        dependentElementId: string | number | null;
        imageId: string | number;
        fontId: string | number;
        colorId: string | number;
        vectorId: string | number;
        textConfig: {
            "text": string,
            "textAlign": string,
            "fill": string,
            "fontSize": number,
            "minFontSize": number,
            "multiline": boolean,
            "tracking": number,
            "outlineWidth": number,
            "outlineColor": {
                "alpha": number,
                "hex": string,
                "cmyk": string
            } | null,
            "prefix": string | null,
            "suffix": string | null,
            "caps": boolean,
            font?: string
            fontFamily: string;
            fontFamilyDownload: string;
        };
        imageUrl: string;
        editable: boolean;
        multiline: boolean;
        breakWords: boolean
    };
    childElementIds: string|number[];
    dependentElementId: string | number | null;
    visible: boolean;
    isChange?: boolean;
    opacity: number;
}

export interface CircularTextInputElement {
    id: number | string;
    uid: string;
    elementId: string;
    name: string;
    type: string;
    order: number;
    isShow: boolean;
    groupId: string;
    config: {
        sWidth: number;
        sHeight: number;
        centerX: number;
        centerY: number;
        rotation: number;
        locked: boolean;
        scale: number;
        colors: {
            order: number;
            value: string
        }[];
        fonts: {
            order: number;
            value: string;
            id: number|string;
        }[];
        colorLibraryId: string | number;
        fontLibraryId: string | number;
        childElementIds: string|number[];
        dependentElementId: string | number | null;
        imageId: string | number;
        fontId: string | number;
        colorId: string | number;
        vectorId: string | number;
        textConfig: {
            "text": string,
            "textAlign": string,
            "fill": string,
            "fontSize": number,
            "minFontSize": number,
            "multiline": boolean,
            "tracking": number,
            "outlineWidth": number,
            "outlineColor": {
                "alpha": number,
                "hex": string,
                "cmyk": string
            } | null,
            "prefix": string | null,
            "suffix": string | null,
            "caps": boolean,
            font?: string;
            horizontalDiameter: number;
            verticalDiameter: number;
            startAngle: number;
            endAngle: number;
            convex: number;
            fontFamily: string;
            fontFamilyDownload: string;
        };
        imageUrl: string;
        editable: boolean;
        library: any;
    };
    childElementIds: string|number[];
    dependentElementId: string | number | null;
    visible: boolean;
    isChange?: boolean;
    opacity: number;
}

export interface ImagePlaceHolderElement {
    id: number | string;
    uid: string;
    elementId: string;
    name: string;
    type: string;
    order: number;
    isShow: boolean;
    groupId: string;
    config: {
        sWidth: number;
        sHeight: number;
        centerX: number;
        centerY: number;
        rotation: number;
        locked: boolean;
        groupId: string | number;
        maskPath: string | null;
        childElementIds: string|number[];
        dependentElementId: string | number | null;
        grading: boolean;
        fullColor: boolean;
        imageUrl: string;
        imageId: string | number;
        fontId: string | number;
        colorId: string | number;
        vectorId: string | number;
        editable: boolean;
        staticPath: string;
        coverMaskArea: boolean;
        evented: boolean;
    };
    grading: boolean;
    fullColor: boolean;
    templateId: number;
    childElementIds: string|number[];
    dependentElementId: string | number | null;
    isChange?: boolean;
    opacity: number;

}

export interface VectorElement {
    id: number | string;
    uid: string;
    elementId: string;
    name: string;
    type: string;
    order: number;
    groupId: string;
    isShow: boolean;
    config: {
        sWidth: number;
        sHeight: number;
        centerX: number;
        centerY: number;
        rotation: number;
        locked: boolean;
        scale: number;
        imageId: string | number;
        fontId: string | number;
        colorId: string | number;
        vectorId: string | number;
        vectors: {
            order: number;
            value: string
        }[];
        libraryId: string | number;
        librarySegmentId: string | number;
        imageUrl: string;
        childElementIds: string|number[];
        dependentElementId: string | number | null;
        grading: boolean;
        fullColor: boolean;
        editable: boolean;
        staticPath: string;
        evented: boolean;
    };
    grading: boolean;
    fullColor: boolean;
    templateId: number;
    childElementIds: string|number[];
    dependentElementId: string | number | null;
    opacity: number;
}

export interface Template {
    id: number,
    uuid: string,
    name: string,
    width: number,
    height: number,
    unit: string,
    baseFile: string | null,
    type: string,
    createdAt: string,
    updatedAt: string,
    groups: string | null,
    elements: (DynamicImageElement | TextInputElement | ImagePlaceHolderElement | VectorElement | CircularTextInputElement)[],
}