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 { CircularGauge } from '@progress/kendo-react-gauges';
import { ListBox, ListBoxToolbar, processListBoxData, processListBoxDragAndDrop } from '@progress/kendo-react-listbox';
import { Grid as GridMUI } from '@mui/material';
import moment from 'moment';
import { Grid, GridColumn as Column, GridToolbar } from '@progress/kendo-react-grid';

import { MyCommandCell, setCommandCell } from './DataGrid-Component/myCommandCell';
import { insertItem, getItems, updateItem, deleteItem, setData } from './DataGrid-Component/services';
import { DropDownCell, setDropDownData } from './DataGrid-Component/myDropDownCell';
import { NameCell } from './DataGrid-Component/myNameCell';
import { CircularGaugeCell } from './DataGrid-Component/myCircularGaugeCell';

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

class D3ContainmentAction extends React.PureComponent {
  editField = 'inEdit';
  constructor(props) {
    super(props);
    this._isMounted = false;
    this.state = {};
  }

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

  componentWillUnmount() {
    this._isMounted = false;
  }

  initialize = async () => {
    let containmentAction = [];
    let [enumValuesString] = await Promise.all([ERCCA.API.getDateType({}, {}, {})]);
    let enumValuesArray = enumValuesString.at(0).ENUM_VALUES.split(',');
    let formattedEnumValues = enumValuesArray.map((value) => value.replace(/'/g, ''));

    let enumValues = formattedEnumValues.map((value, index) => ({
      text: value,
      value: value,
    }));

    if (/^MRB-\d{2}-\d{5}$/.test(this.props.id)) {
      containmentAction = await ERCCA.model.rccaD3ImmediateAction.find({ ria_rcca_id: this.props.id });

      let idCounter = 1;
      for (let i = 0; i < containmentAction.length; i++) {
        containmentAction[i].id = idCounter;
        idCounter++;
      }
    } else {
    }
    setData(containmentAction, 'D3ContainmentAction');
    setDropDownData([...enumValues.flat()], 'D3ContainmentAction');
    setCommandCell('D3ContainmentAction');

    this._isMounted &&
      this.setState({
        containmentAction: containmentAction,
        dateTypeLists: [...enumValues.flat()],
      });
  };

  CommandCell = (props) => <MyCommandCell {...props} edit={this.enterEdit} remove={this.remove} add={this.add} discard={this.discard} update={this.update} cancel={this.cancel} editField={this.editField} />;

  onAddNewHandler = () => {
    const newDataItem = {
      inEdit: true,
      ria_date_type: 'ECD',
      ria_status: 0,
    };
    this.setState({
      containmentAction: [newDataItem, ...this.state.containmentAction],
    });
  };

  itemChange = (event) => {
    const field = event.field || '';
    const newData = this.state.containmentAction.map((item) =>
      item.id === event.dataItem.id
        ? {
            ...item,
            [field]: event.value,
          }
        : item
    );
    this.setState({
      containmentAction: newData,
    });
  };

  remove = (dataItem) => {
    const newData = [...deleteItem(dataItem)];

    this.setState({
      containmentAction: newData,
    });
  };

  add = (dataItem) => {
    dataItem.inEdit = true;
    const newData = insertItem(dataItem);
    console.log('add', newData);
    this.setState({
      containmentAction: newData,
    });
  };

  update = (dataItem) => {
    dataItem.inEdit = false;
    const newData = updateItem(dataItem);
    // const newIndexId =
    //   this.state.containmentAction.reduce((maxId, item) => {
    //     return item.id > maxId ? item.id : maxId;
    //   }, 0) + 1;

    this.setState({
      //id: newIndexId,
      containmentAction: newData,
    });
  };

  discard = () => {
    const newData = [...this.state.containmentAction];
    newData.splice(0, 1);
    this.setState({
      containmentAction: newData,
    });
  };

  cancel = (dataItem) => {
    const originalItem = getItems().find((p) => p.id === dataItem.id);
    const newData = this.state.containmentAction.map((item) => (item.id === originalItem.id ? originalItem : item));
    this.setState({
      containmentAction: newData,
    });
  };

  enterEdit = (dataItem) => {
    let newData = this.state.containmentAction.map((item) => {
      item.ria_action_date = moment(item.ria_action_date).toDate();
      return item.id === dataItem.id
        ? {
            ...item,
            inEdit: true,
          }
        : item;
    });

    this.setState({
      containmentAction: newData,
    });
  };

  render() {
    return (
      <>
        <Typography.p themeColor={'success'} style={{ height: '10px' }}>
          <b>D3 - Immediate actions.</b>
        </Typography.p>
        <p>Contains the problem and investigation action.</p>
        <span className={'k-form-separator'} />
        <br />
        <RegisterForm
          initialValues={{ descProblem: [] }}
          render={() => (
            <>
              <FormElement>
                <Grid
                  style={{
                    height: '500px',
                  }}
                  data={this.state.containmentAction}
                  onItemChange={this.itemChange}
                  editField={this.editField}
                >
                  <GridToolbar>
                    <button title="Add new" className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" onClick={this.onAddNewHandler}>
                      Add new
                    </button>
                  </GridToolbar>
                  <Column field="id" title="No." width="100px" editable={false} />
                  <Column field="ria_actions" title="Actions" cell={NameCell} />
                  <Column field="ria_pic" title="Responsible" editor="text" />

                  <Column field="ria_pic_email" title="Contact (either PIC or superior email internal CTRM only)" editor="text" />
                  <Column field="ria_action_date" title="Date [Date Format : DD-MM-YYYY]" editor="date" format="{0:d}" />
                  <Column field="ria_date_type" title="ECD/POE" cell={DropDownCell} />
                  <Column field="ria_remarks" title="Remarks / Evidence" editor="text" />
                  <Column field="ria_status" title="Status (%)" cell={CircularGaugeCell} />

                  <Column cell={this.CommandCell} width="240px" />
                </Grid>
              </FormElement>
            </>
          )}
        />
      </>
    );
  }
}

export default D3ContainmentAction;