import * as React from 'react';
import { TimeAxisLabelFormat } from "./TimeAxisLabelFormat";
import { getModifiedProps, isValidProp } from "igniteui-react-core/ES2015/componentUtil";
/**
 * Settings for a label format on a time axis.
 * Label formats can be applied to a time axis, which are dynamic, according to the visible range.  During zooming, the visible range of the axis can change, and so a different label format is selected.  The label format selected will be the one with the largest range smaller than the visible range of the axis.
*
* The `IgrTimeAxisLabelFormat` provide the settings for a label format on a time axis.
*
* ```ts
* let labelFormat = new TimeAxisLabelFormat();
* labelFormat.format = "hh:mm:ss";
* labelFormat.range = 1000;
* this.xAxis.labelFormats.add(labelFormat);
* labelFormat = new TimeAxisLabelFormat();
* labelFormat.format = "hh:mm";
* labelFormat.range = 60 * 1000;
* this.xAxis.labelFormats.add(labelFormat);
* labelFormat = new TimeAxisLabelFormat();
* labelFormat.format = "MMM-dd-yy";
* labelFormat.range = 24 * 60 * 60 * 1000;
* this.xAxis.labelFormats.add(labelFormat);
* labelFormat = new TimeAxisLabelFormat();
* labelFormat.format = "MMM yy";
* labelFormat.range = 365.24 * 24 * 60 * 60 * 1000;
* this.xAxis.labelFormats.add(labelFormat);
* labelFormat = new TimeAxisLabelFormat();
* labelFormat.format = "yyyy";
* labelFormat.range = 5 * 365 * 24 * 60 * 60 * 1000;
* this.xAxis.labelFormats.add(labelFormat);
* ```
*
* ```ts
*   <IgrDataChart
*     dataSource={this.state.dataSource}
*     width="700px"
*     height="500px">
*     <IgrTimeXAxis name="xAxis" label="Date"
* 			dateTimeMemberPath="Date" >
*
*  </IgrTimeXAxis>
*  </IgrDataChart>
* ```
*/
export class IgrTimeAxisLabelFormat extends React.Component {
    constructor(props) {
        super(props);
        this._hasUserValues = new Set();
        this._implementation = this.createImplementation();
        this._implementation.externalObject = this;
        this.onImplementationCreated();
    }
    createImplementation() {
        return new TimeAxisLabelFormat();
    }
    get i() {
        return this._implementation;
    }
    onImplementationCreated() {
    }
    get hasUserValues() {
        return this._hasUserValues;
    }
    componentDidMount() {
        for (const p of Object.keys(this.props)) {
            if (isValidProp(this, p)) {
                this._hasUserValues.add(p);
                this[p] = this.props[p];
            }
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        const mod = getModifiedProps(this.props, nextProps);
        for (const p of Object.keys(mod)) {
            if (isValidProp(this, p)) {
                this._hasUserValues.add(p);
                this[p] = mod[p];
            }
        }
        return true;
    }
    render() {
        return null;
    }
    /**
     * The visible axis range at which to apply this label format.
    *
    * The `range` property provide the visible axis range at which to apply this label format.
    *
    * ```ts
    *   <IgrDataChart
    *     dataSource={this.state.dataSource}
    *     width="700px"
    *     height="500px">
    *     <IgrTimeXAxis name="xAxis" label="Date"
    * 			dateTimeMemberPath="Date"/>
    * 	</IgrDataChart>
    * ```
    *
    * ```ts
    * let labelFormat = new TimeAxisLabelFormat();
    * labelFormat.format = "hh:mm:ss";
    * labelFormat.range = 1000;
    * this.xAxis.labelFormats.add(labelFormat);
    * labelFormat = new TimeAxisLabelFormat();
    * labelFormat.format = "hh:mm";
    * labelFormat.range = 60 * 1000;
    * this.xAxis.labelFormats.add(labelFormat);
    * labelFormat = new TimeAxisLabelFormat();
    * labelFormat.format = "MMM-dd-yy";
    * labelFormat.range = 24 * 60 * 60 * 1000;
    * this.xAxis.labelFormats.add(labelFormat);
    * ```
    */
    get range() {
        return this.i.f;
    }
    set range(v) {
        this.i.f = +v;
    }
    /**
     * The DateTime format string to apply.
     * Some common DateTime format strings are: yyyy, MM/dd/yy, and hh:mm:ss.
    *
    * The `format` property provide the DateTime format string to apply.
    *
    * ```ts
    * let labelFormat = new TimeAxisLabelFormat();
    * labelFormat.format = "hh:mm:ss";
    * labelFormat.range = 1000;
    * this.xAxis.labelFormats.add(labelFormat);
    * labelFormat = new TimeAxisLabelFormat();
    * labelFormat.format = "hh:mm";
    * labelFormat.range = 60 * 1000;
    * this.xAxis.labelFormats.add(labelFormat);
    * labelFormat = new TimeAxisLabelFormat();
    * labelFormat.format = "MMM-dd-yy";
    * labelFormat.range = 24 * 60 * 60 * 1000;
    * this.xAxis.labelFormats.add(labelFormat);
    * ```
    *
    * ```ts
    *   <IgrDataChart
    *     dataSource={this.state.dataSource}
    *     width="700px"
    *     height="500px">
    *     <IgrTimeXAxis name="xAxis" label="Date"
    * 			dateTimeMemberPath="Date" >
    *
    *  </IgrTimeXAxis>
    *  </IgrDataChart>
    * ```
    */
    get format() {
        return this.i.b;
    }
    set format(v) {
        this.i.b = v;
    }
}
