import React from 'react';
import { Form as RegisterForm, Field, FieldArray, FormElement } from '@progress/kendo-react-form';
import { Button } from '@progress/kendo-react-buttons';
import { FormDatePicker, FormNumericTextBox, FormInput, FormComboBox, FormCheckbox, FormMaskedTextBox, FormTextArea } from './form-component';
import { programValidator, rejectionTypeValidator, airCraftTypeValidator } from './validators';
import { Typography } from '@progress/kendo-react-common';
import { ERCCA } from 'apps/ERCCA/constants';
import { Error } from '@progress/kendo-react-labels';
import { Input } from '@progress/kendo-react-inputs';
import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
import './Form.scss';
import { CircularGauge } from '@progress/kendo-react-gauges';

class D1Problem extends React.PureComponent {
  constructor(props) {
    super(props);
    this._isMounted = false;
    this.state = { value: 0 };
  }
  componentDidMount() {
    this._isMounted = true;
    helpers.debounce(`D1Problem-initialize`, async () => {
      this.initialize();
    });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  initialize = async () => {
    this._isMounted && this.setState({});
  };

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

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

  render() {
    return (
      <>
        <table className="tableReport" align="center !important">
          <thead>
            <tr>
              <td
                colSpan="4"
                style={{
                  color: 'black',
                }}
                align="center"
              >
                Current Status
              </td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>
                <div style={{ width: '200px', margin: 'auto' }}>
                  <CircularGauge value={25} colors={this.colors} centerRender={this.centerRenderer} />
                </div>
                Registered problem and Short Term Corrective Action in place in house.
              </th>
              <th>
                <div style={{ width: '200px', margin: 'auto' }}>
                  <CircularGauge value={50} colors={this.colors} centerRender={this.centerRenderer} />
                </div>
                Long Term Corrective Action developed but not implemented.
              </th>
              <th>
                <div style={{ width: '200px', margin: 'auto' }}>
                  <CircularGauge value={75} colors={this.colors} centerRender={this.centerRenderer} />
                </div>
                Long Term Corrective Action implemented. Monitoring / evaluating effectiveness
              </th>
              <th>
                <div style={{ width: '200px', margin: 'auto' }}>
                  <CircularGauge value={100} colors={this.colors} centerRender={this.centerRenderer} />
                </div>
                Long Term Corrective Action confirmed effective. Problem closed.
              </th>
            </tr>
            <tr>
              <td colSpan="4" align="center">
                <span
                  style={{
                    textAlign: 'center',
                    display: 'block',
                    margin: '0 auto',
                  }}
                >
                  <img src="\src\apps\ERCCA\img\8d_process_flow.jpg" alt="8DFlow" width="100%" height="95%" />
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </>
    );
  }
}

export default D1Problem;