import React from 'react';
import { Form as RegisterForm, Field, FieldArray, FormElement } from '@progress/kendo-react-form';
import { Typography } from '@progress/kendo-react-common';
import { TextBox, Switch } from '@progress/kendo-react-inputs';
import './Form.scss';
import { CircularGauge } from '@progress/kendo-react-gauges';
import { ListBox, ListBoxToolbar, processListBoxData, processListBoxDragAndDrop } from '@progress/kendo-react-listbox';
import { Grid as GridMUI } from '@mui/material';

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

import FormGridD2EstablishTeam from './FormGridD2EstablishTeam';
import { FormUpload } from './form-component';

const arrayLengthValidator = (value) => (value && value.length ? '' : 'Please add at least one record.');
const SELECTED_FIELD = 'selected';

class D2EstablishTeam extends React.PureComponent {
  constructor(props) {
    super(props);
    this._isMounted = false;
    this.state = {};
  }

  componentDidMount() {
    this._isMounted = true;
    helpers.debounce(`D2EstablishTeam-initialize`, async () => {
      this.initialize();
    });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

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

  render() {
    return (
      <>
        <Typography.p themeColor={'success'} style={{ height: '10px' }}>
          <b>D2 - Establish the cross-functional team</b>
        </Typography.p>
        <p>A cross-functional team is essential to ensure all aspects are considered and a fix is found.</p>
        <span className={'k-form-separator'} />
        <br />
        <RegisterForm
          initialValues={{ descProblem: [] }}
          render={() => (
            <>
              <FormElement>
                <FieldArray name="descProblem" component={FormGridD2EstablishTeam} validator={arrayLengthValidator} />
              </FormElement>
            </>
          )}
        />
      </>
    );
  }
}

export default D2EstablishTeam;