import { SafeHtml } from "@angular/platform-browser";
import { DropDownOption } from "../../entity/dropDownOption";
import { TemplateRef } from "@angular/core";

export enum FtEditableType {
    NONE = 'none',
    READONLY = 'readOnly',
    EDITABLE = 'editable',
}

export enum FtTrigger {
    NOOP = 'noop',
    DOUBLE_CLICK = 'doubleClick',
}
export declare type FtTagType = 'info' | 'primary' | 'danger' | 'warning' | 'success' | 'secondary' | 'light' | 'dark';
export declare type FtColType = 'text' | 'date' | 'dateTime' | 'dropdown' | 'number' | 'checkbox' | 'checkall' | 'currency' | 'tag' | 'template';
export declare type FtFilterMode = 'startsWith' | 'contains' | 'allkeywords';
export class FancyColumn<T = any> {
    public name: string;
    public title: string;

    /**
     * Col data type, Defaults to text, available types:
     * text, date, dateTime, dropdown, number, checkbox, checkall, currency, tag
     */
    public type?: FtColType = 'text'; // 'text', 'date', 'dropdown' etc.  Defaults to 'text'
    public dropdownSource?: DropDownOption[];
    public class?: string; // apply this class to the cells
    //public sort?: boolean;

    /**
     * Sort by this column, available types:'asc', 'desc'
     */
    public sortDirection?: string;
    public filter?: any;

    /**
     * Col filter mode, Defaults to contains, available types:
     * startsWith, contains, allkeyswords
     */
    public filterMode?: FtFilterMode = 'contains';
    /**
     * Col filter case sensitive setting, Defaults to `true`
     */
    public filterIgnoreCase?: boolean = true;
    public filterPreparedValue?: boolean = false;
    public dateRange?: any;
    public group?: boolean;

    /**
     * Col visible setting, Defaults to `true`
     */
    public visible?: boolean = true;
    /**
     * Disable column hover tooltip, Defaults to `false`
     */
    public noToolTip?: boolean = false;
    public editableType?: FtEditableType = FtEditableType.NONE;
    public editingFieldIndex?: number;
    public editingFieldWidth?: number;
    public footerClass?: string; // apply this class to the cells in the footer
    public valuePrepareFunction?: (value: T) => string | SafeHtml | number | TemplateRef<any>;
    /**
     * `(optional)` Preparation function for tooltip, if not exist will using same value with col value
     */
    public toolTipPrepareFunction?: (value: T) => string;
    public groupKeyPrepareFunction?: (value: T) => string;
    public sortFunction?: (a: T, b: T) => number;
    public filterFunction?: (value: FancyDisplayRow<T>, input) => boolean;
    public tagsPrepareFunction?: (value: T) => FancyTag[];

    /**
     * apply the width px to column 0 for auto width
     */
    public widthPx?: number;
    /**
     * apply the width rem to column 0 for auto width, will overwrite `widthPx`
     */
    public widthRem?: number;
    /**
     * apply the width % to column 0 for auto width, will overwrite `widthRem` and `widthPx`
     */
    public widthPct?: number;


    /**
     * maxWidth for text wrapping, calculated by `widthPct`, do NOT use this for now!
     */
    public maxWidth?: string;

    public initFocusFilterInput?: boolean = false;

    /**
     * the tagging field name for `checkall` column type to track checked order
     */
    public taggingTarget?: string = null;

    constructor(config: Partial<FancyColumn>) {
        Object.assign(this, config);
    }
    /**
     * When `allowDragAndDrop` is enabled, then this column is draggable, default as `true`
     */
    public draggable?: boolean = true;

    /**
     * Set `td colspan`, currently only works in footer
     */
    public colspan?: number = 1;

    uiCheckAll?: boolean = false;
    uiWidth?: string;
}

export class FancyTag {


    /**
     * status could be `info` , `primary` , `danger` , `warning` , `success`
     */
    constructor(text: string, status: FtTagType, actionTag: string = null, tooltip = null) {
        this.text = text;
        this.status = status;
        this.tooltip = tooltip || text;
        this.actionTag = actionTag;
    }

    text: string;
    tooltip: string;
    status: FtTagType;

    actionTag: string;
}

export class FancyDisplayRow<T = any> {

    index: number;
    seq: number;
    /**
     * Sequence number for UI only
     */
    uiSeq: number;
    isGroupHeader: boolean;
    groupKey?: any;
    colHtmlTexts: any;
    colTooltips: any;
    rowDatum: T;
    visible: boolean;
    /**
     * this is for custom groups to store row id for many to many relationships.
     */
    customRowId: string;

    /**
     * this only has value when file drop to the row
     */
    uiFileDropList: FileList | File[];
}
export class FancyGroup<T = any> {
    seq: number;
    /**
     * Origin value type of groupKey
     */
    groupKey: any;
    /**
     * Formatted string value of groupValue
     */
    groupValue: any;
    rows: FancyDisplayRow<T>[];
    expanded: boolean;
    /**
     * this only has value when file drop to the Group
     */
    uiFileDropList: FileList | File[];
    uiAllowDeleteWhenEmpty: boolean;
}

export class FancyColumnCustomSetting {
    id: string
    name: string
    seq: number
    visible: boolean
    groupBy: boolean
    widthPx: number
}