import React from 'react';
import ReactDOM from 'react-dom';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { TextBox } from '@progress/kendo-react-inputs';
import { CircularGauge } from '@progress/kendo-react-gauges';

import { ERCCA } from 'apps/ERCCA/constants';

export class CircularGaugeCell extends React.Component {
  constructor(props) {
    super(props);
    this.state = { percentage: 0, circularGaugeValue: 0 };
  }

  handleChange = (e) => {
    console.log('this.props.onChange', this.props.onChange);
    if (this.props.onChange) {
      this.props.onChange({
        dataIndex: 0,
        dataItem: this.props.dataItem,
        field: this.props.field,
        syntheticEvent: e.syntheticEvent,
        value: e.value.value,
      });
    }
  };

  colors = [
    {
      to: 25,
      color: '#0058e9',
    },
    {
      from: 25,
      to: 50,
      color: '#37b400',
    },
    {
      from: 50,
      to: 75,
      color: '#ffc000',
    },
    {
      from: 75,
      color: '#f31700',
    },
  ];

  centerRenderer = (percentage, color) => {
    return <h3 style={{ color: color }}>{percentage}%</h3>;
  };

  changeCircularGaugeValue = (e) => {
    this.setState((prevState) => {
      const newValue = prevState.circularGaugeValue + 25;
      return { circularGaugeValue: newValue > 100 ? 0 : newValue };
    });
    console.log('this.props.onChange', this.props.onChange);
    if (this.props.onChange) {
      this.props.onChange({
        dataIndex: 0,
        dataItem: this.props.dataItem,
        field: this.props.field,
        syntheticEvent: e.syntheticEvent,
        value: e.value.value,
      });
    }
  };

  render() {
    const { dataItem } = this.props;
    const dataValue = dataItem[this.props.field || ''] === null ? '' : dataItem[this.props.field || ''];

    return (
      <td>
        {dataItem.inEdit ? (
          <>
            <div style={{ width: '200px', margin: 'auto' }} onClick={this.changeCircularGaugeValue}>
              <CircularGauge value={this.state.circularGaugeValue} colors={this.colors} centerRender={this.centerRenderer} style={{ width: '90px', height: '90px' }} />
            </div>
          </>
        ) : (
          //dataValue.toString()
          dataValue
        )}
      </td>
    );
  }
}