constructor(props) {
    super(props);
    this.state = {
        patientId: props.patientId ? props.patientId : null,
        FromDate: new Date(),
        time: null,
        isStart: [],
        isSave: [],
        secondsElapsed: [],
        incrementer: [],
    }
}

renderLoading() {
    if (this.state.isLoading) {
        return (
            <div className="full_loader">
                <div className="circle_loader page_loader">
                    <img src={Loader} alt="" />
                </div>
            </div>
        );
    }
}

componentWillMount = () => {
    this.props.PatientRecordDurationDataList(this.state.patientId)
}

componentWillReceiveProps = (nextProps) => {
    if( nextProps.recordDurationDataList.data !== undefined) {
        let clikcedData = this.state.isStart
        let saveData = this.state.isSave
        let counterData = this.state.secondsElapsed
        let patientBehaviorsReductionData = nextProps.recordDurationDataList.data.PatientBehaviorsReductionData;
        patientBehaviorsReductionData.map((obj, index) => {
            return saveData[index] = false;
        })
        patientBehaviorsReductionData.map((obj, index) => {
            return clikcedData[index] = false;
        })
        patientBehaviorsReductionData.map((obj, index) => {
            return counterData[index] = 0;
        })
        this.setState({
            isStart: clikcedData,
            isSave: saveData,
            secondsElapsed: counterData
        })
    }
}

componentWillUnmount = () => {
    this.state.incrementer.map((obj, index) => {
        return clearInterval(this.state.incrementer[index]);
    })
}

handleStart = (index) => {
    var _this = this;
    const isStart = this.state.isStart
    isStart[index] = true
    _this.setState({
        isStart: isStart
    });

    let incrementer = this.state.incrementer

    incrementer[index] = setInterval(() => {
        let secondsElapsed = _this.state.secondsElapsed
        secondsElapsed[index] = secondsElapsed[index] + 1
        _this.setState({
            secondsElapsed : secondsElapsed
        })
    }, 1000)

    _this.setState({
        incrementer: incrementer
    });

}

handleStop = (index) => {
    let isStart = this.state.isStart
    let isSave = this.state.isSave
    let counterData = this.state.secondsElapsed
    isStart[index] = false
    isSave[index] = true
    counterData[index];
    this.setState({
        isStart: isStart,
        isSave: isSave,
        secondsElapsed: counterData
    },clearInterval(this.state.incrementer[index]));
}

handleCancel = (index) => {
    let clikcedData = this.state.isStart
    let isSave = this.state.isSave
    let counterData = this.state.secondsElapsed
    clikcedData[index] = false
    isSave[index] = false
    counterData[index] = 0;
    this.setState({
        isStart: clikcedData,
        isSave: isSave,
        secondsElapsed: counterData
    }, clearInterval(this.state.incrementer[index]));

}


handleSave = (index) => {

}

getSeconds = (index) => {
    return ('0' + this.state.secondsElapsed[index] % 60).slice(-2)
}

getMinutes = (index) => {
    return Math.floor(this.state.secondsElapsed[index] / 60)
}


renderData = (dataList) => {
    let PatientRecordFrequencyData = dataList || [];
    if (!PatientRecordFrequencyData.length) {
        return (
            <tr>
                <td>
                    <div className="text-center no-record">{this.props.loading ? 'Loading please wait...' : 'No record found.'}</div>
                </td>
            </tr>
        );
    }
    return PatientRecordFrequencyData.map((Obj, index) => {
        return (
            <tr key={index}>
                <td>
                    {Obj.behaviorName}
                    <div className="row">
                        <div className="col-sm-12 btn_lt reset-btn mt-10">
                            {(this.state.isStart[index] === false && this.state.isSave[index] === false) &&
                                <RaisedButton
                                    label="START"
                                    primary={true}
                                    onTouchTap={() => this.handleStart(index)} />
                            }
                            {(this.state.isStart[index] === true && this.state.isSave[index] === false) &&
                                <div>
                                    <span>
                                        <RaisedButton
                                            label="STOP"
                                            primary={true}
                                            onTouchTap={() => this.handleStop(index)} />
                                    </span>
                                    <span style={{ marginLeft: '20px' }}>
                                        <RaisedButton
                                            label="CANCEL"
                                            primary={true}
                                            onTouchTap={() => this.handleCancel(index)} />
                                    </span>
                                </div>
                            }
                             {this.state.isSave[index] === true &&
                                <div>
                                    <span>
                                        <RaisedButton
                                            label="SAVE"
                                            primary={true}
                                            onTouchTap={() => this.handleSave(index)} />
                                    </span>
                                    <span style={{ marginLeft: '20px' }}>
                                        <RaisedButton
                                            label="CANCEL"
                                            primary={true}
                                            onTouchTap={() => this.handleCancel(index)} />
                                    </span>
                                </div>
                            }
                        </div>
                    </div>
                </td>
                <td>
                    {Obj.description}
                </td>
                <td>
                    {this.getMinutes(index)}:{this.getSeconds(index)}
                </td>
            </tr>
        )
    })
}

renderRecordDuration = () => {
    const tableClass = classNames({
        'table': true,
        'table-striped': this.props.condensed,
        'table-bordered': this.props.bordered,
        'table-hover': true,
        'table-condensed': this.props.condensed,
        'customtable': true,
    });
    const { recordDurationDataList } = this.props;
    let PatientRecordDurationList = (recordDurationDataList && recordDurationDataList.data) || [];
    return (
        <div className="table-responsive mt-15">
            <table className={tableClass}>
                <thead>
                    <tr>
                        <th width="40%">Duration</th>
                        <th width="40%"></th>
                        <th width="20%"></th>
                    </tr>
                </thead>
                <tbody>
                    {this.renderData(PatientRecordDurationList.PatientBehaviorsReductionData)}
                </tbody>
            </table>
        </div>
    )
}


render() {

    return (
        <div>
            {this.renderLoading()}

            <div className="clearfix"></div>
            <div className="readmin-panel">
                <div className="panel-body">
                    <div className="row">
                        {this.renderRecordDuration()}
                    </div>
                </div>
            </div>
        </div>
    )
}