import { Component, Property, NotifyPropertyChanges, Internationalization, Complex, isNullOrUndefined, TapEventArgs, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { ModuleDeclaration, EmitType, remove, Event, EventHandler, Touch } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, setCulture, Browser } from '@syncfusion/ej2-base';import { SvgRenderer, CanvasRenderer, Tooltip as tool } from '@syncfusion/ej2-svg-base';import { Size, stringToNumber, RectOption, Rect, TextBasic, measureText, CurrentRect, LegendRange, ToggleVisibility, removeMeasureElement } from './utils/helper';import { DrawSvgCanvas, TextOption, titlePositionX, getTitle, showTooltip, getElement, SelectedCellDetails } from './utils/helper';import { removeElement, CanvasTooltip, getTooltipText } from './utils/helper';import { FontModel, MarginModel, TitleModel } from './model/base-model';import { Margin, Title, ColorCollection, LegendColorCollection } from './model/base';import { Theme, getThemeColor } from './model/theme';import { IThemeStyle, ILoadedEventArgs, ICellClickEventArgs, ITooltipEventArgs, IResizeEventArgs } from './model/interface';import { ICellEventArgs, ISelectedEventArgs } from './model/interface';import { DrawType, HeatMapTheme, ColorGradientMode } from './utils/enum';import { Axis } from './axis/axis';import { AxisModel } from './axis/axis-model';import { AxisHelper } from './axis/axis-helpers';import { Series, CellSettings } from './series/series';import { CellSettingsModel } from './series/series-model';import { PaletteSettingsModel } from './utils/colorMapping-model';import { PaletteSettings, CellColor } from './utils/colorMapping';import { TooltipSettings } from './utils/tooltip';import { TooltipSettingsModel } from './utils/tooltip-model';import { TwoDimensional } from './datasource/twodimensional';import { Tooltip } from './utils/tooltip';import { LegendSettingsModel } from '../heatmap/legend/legend-model';import { LegendSettings, Legend } from '../heatmap/legend/legend';import { Adaptor, Data } from './datasource/adaptor';import { DataModel } from './datasource/adaptor-model';import { ILegendRenderEventArgs } from './model/interface';import { ExportUtils } from '../heatmap/utils/export';import { ExportType } from '../heatmap/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
import {ComponentModel} from '@syncfusion/ej2-base';

/**
 * Interface for a class HeatMap
 */
export interface HeatMapModel extends ComponentModel{

    /**
     * Sets and gets the width of the heatmap. The width of the heatmap accepts pixel or percentage values given in string format.
     *
     * If specified as '100%, heatmap renders to the full width of its parent element.
     *
     * @default null
     */

    width?: string;

    /**
     * Sets and gets the height of the heatmap. The height of the heatmap accepts pixel or percentage values given in string format.
     *
     * @default null
     */

    height?: string;

    /**
     * Enable or disable the visibility of the tooltip for heatmap.
     *
     * @default true
     */

    showTooltip?: boolean;

    /**
     * Triggers before the tooltip of the heatmap is rendered on the heatmap cell.
     *
     * {% codeBlock src='heatmap/tooltipRender/index.md' %}{% endcodeBlock %}
     *
     * @event 'object'
     */
    tooltipRender?: EmitType<ITooltipEventArgs>;

    /**
     * Triggers to notify the resize of the heatmap when the window is resized.
     *
     * @event 'object'
     */
    resized?: EmitType<IResizeEventArgs>;

    /**
     * Triggers after heatmap is loaded.
     *
     * @event 'object'
     */
    loaded?: EmitType<ILoadedEventArgs>;

    /**
     * Triggers before each heatmap cell renders.
     * {% codeBlock src='heatmap/cellRender/index.md' %}{% endcodeBlock %}
     *

     * @event 'object'
     */
    cellRender?: EmitType<ICellEventArgs>;

    /**
     * Triggers when heatmap cell gets selected.
     *
     * @event 'object'
     */
    cellSelected?: EmitType<ISelectedEventArgs>;

    /**
     * Specifies the rendering mode of heatmap. The following are the available rendering modes.
     * * SVG - Heatmap is rendered using SVG element.
     * * Canvas - Heatmap is rendered using Canvas element.
     * * Auto - Automatically switches the rendering mode based on number of records in the data source.
     *
     * @default SVG
     */
    renderingMode?: DrawType;

    /**
     * Sets and gets the data to visualize in the heatmap.
     *
     * @isDataManager false
     * @default null
     */

    dataSource?: Object;

    /**
     * Sets and gets the options to customize the data mapping for the data in the heatmap.
     * {% codeBlock src='heatmap/dataSourceSettings/index.md' %}{% endcodeBlock %}
     */
    dataSourceSettings?: DataModel;

    /**
     * Specifies the background color of the entire heatmap.
     *
     * @default null
     */
    backgroundColor?: string;

    /**
     *  Sets and gets the theme styles supported for heatmap. When the theme is set, the styles associated with the theme will be set in the heatmap.
     *
     * @default 'Material'
     */
    theme?: HeatMapTheme;

    /**
     * Enable or disable the selection of cells in heatmap.
     * {% codeBlock src='heatmap/allowSelection/index.md' %}{% endcodeBlock %}
     *
     * @default false
     */

    allowSelection?: boolean;

    /**
     * Enable or disable the multiple selection of cells in heatmap.
     *
     * @default true
     */

    enableMultiSelect?: boolean;

    /**
     * Specifies whether to enable the rendering of untrusted HTML values in the HeatMap. If `enableHtmlSanitizer` set to **true**, the component will sanitize any suspected untrusted strings and scripts before rendering them.
     *
     * @default false
     */

    enableHtmlSanitizer?: boolean;

    /**
     * Sets and gets the options to customize left, right, top and bottom margins of the heatmap.
     */

    margin?: MarginModel;

    /**
     * Sets and gets the options to customize the title of the heatmap.
     * {% codeBlock src='heatmap/titleSettings/index.md' %}{% endcodeBlock %}
     */
    titleSettings?: TitleModel;

    /**
     * Sets and gets the options to configure the horizontal axis.
     */

    xAxis?: AxisModel;

    /**
     * Sets and gets the options for customizing the legend of the heatmap.
     * {% codeBlock src='heatmap/legendSettings/index.md' %}{% endcodeBlock %}
     */
    legendSettings?: LegendSettingsModel;

    /**
     * Sets and gets the options for customizing the cell color of the heatmap.
     * {% codeBlock src='heatmap/paletteSettings/index.md' %}{% endcodeBlock %}
     */
    paletteSettings?: PaletteSettingsModel;

    /**
     * Sets and gets the options for customizing the tooltip of the heatmap.
     * {% codeBlock src='heatmap/tooltipSettings/index.md' %}{% endcodeBlock %}
     */
    tooltipSettings?: TooltipSettingsModel;

    /**
     * Sets and gets the options to configure the vertical axis.
     */

    yAxis?: AxisModel;

    /**
     * Sets and gets the options to customize the heatmap cells.
     * {% codeBlock src='heatmap/cellSettings/index.md' %}{% endcodeBlock %}
     */

    cellSettings?: CellSettingsModel;

    /**
     * Triggers after heatmap is completely rendered.
     *
     * @event 'object'
     */
    created?: EmitType<Object>;

    /**
     * Triggers before heatmap gets loaded.
     * {% codeBlock src='heatmap/load/index.md' %}{% endcodeBlock %}
     *
     * @event 'object'
     */
    load?: EmitType<ILoadedEventArgs>;

    /**
     * Triggers when clicking on the heatmap cell.
     *
     * @event 'object'
     */
    cellClick?: EmitType<ICellClickEventArgs>;

    /**
     * Triggers when performing the double click operation on the cells in the HeatMap.
     *
     * @event cellDoubleClick
     */
    cellDoubleClick?: EmitType<ICellClickEventArgs>;

    /**
     * Triggers before the legend is rendered.
     * {% codeBlock src='heatmap/legendRender/index.md' %}{% endcodeBlock %}
     *

     * @event 'object'
     */
    legendRender?: EmitType<ILegendRenderEventArgs>;

}