import React from 'react';
import { Field } from '@progress/kendo-react-form';
import { Button } from '@progress/kendo-react-buttons';
import { Error } from '@progress/kendo-react-labels';
import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
import { FormComboBox, FormInput, FormNumericTextBox } from './form-component';
import { requiredValidator } from './validators';
import { ERCCA } from 'apps/ERCCA/constants';

const ParentFieldContext = React.createContext('');
const FORM_DATA_INDEX = 'formDataIndex';

class FormGridD2EstablishTeam extends React.Component {
  constructor(props) {
    super(props);

    this.onAdd = this.onAdd.bind(this);
    this.onRemove = this.onRemove.bind(this);
  }

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

  componentWillUnmount() {
    this._isMounted = false;
  }

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

    // Add disabled options for "MRB Chairman" and "System Admin"
    const disabledOptions = ['MRB Chairman', 'System Admin'];

    // Filter out disabled options from the enum values
    const filteredEnumValues = formattedEnumValues.filter((value) => !disabledOptions.includes(value));

    let enumValues = filteredEnumValues.map((value, index) => ({
      label: value,
      value: value,
      disabled: false, // Set disabled to false by default
    }));

    // Set disabled to true for the disabled options
    disabledOptions.forEach((option) => {
      const index = enumValues.findIndex((value) => value.value === option);
      if (index !== -1) {
        enumValues[index].disabled = true;
      }
    });

    this._isMounted && this.setState({ userAccessLists: [...enumValues.flat(), { label: 'Others', value: 'Others' }] });
  };

  onAdd(e) {
    e.preventDefault();
    this.props.onUnshift({
      value: {
        staffId: '',
        staffName: '',
        responsibility: [],
        email: '',
      },
    });
  }

  onRemove(cellProps) {
    this.props.onRemove({
      index: cellProps.dataItem[FORM_DATA_INDEX],
    });
  }

  nameCell = (props) => {
    const parentField = React.useContext(ParentFieldContext);
    return <td>{props.field === 'responsibility' ? <Field component={FormComboBox} name={`${parentField}[${props.dataItem[FORM_DATA_INDEX]}].${props.field}`} textField={'label'} data={this.state.userAccessLists} /> : <Field component={FormInput} name={`${parentField}[${props.dataItem[FORM_DATA_INDEX]}].${props.field}`} validator={requiredValidator} />}</td>;
  };

  commandCell = (onRemove) => (props) => {
    const onClick = React.useCallback(
      (e) => {
        e.preventDefault();
        onRemove(props);
      },
      [props]
    );
    return (
      <td>
        <Button icon="close" onClick={onClick} />
      </td>
    );
  };

  render() {
    const { validationMessage, visited, name } = this.props;
    const dataWithIndexes = this?.props?.value.map((item, index) => {
      return {
        ...item,
        [FORM_DATA_INDEX]: index,
        rowNumber: index + 1,
      };
    });

    return (
      <ParentFieldContext.Provider value={name}>
        {visited && validationMessage && <Error>{validationMessage}</Error>}
        <Grid data={dataWithIndexes}>
          <GridToolbar>
            <button title="Add Team" className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" onClick={this.onAdd}>
              Add Team
            </button>
          </GridToolbar>
          <GridColumn field="rowNumber" title="No." width="100px" />
          <GridColumn field="staffId" title="Staff Id" cell={this.nameCell} />
          <GridColumn field="staffName" title="Staff Name" cell={this.nameCell} />
          <GridColumn field="responsibility" title="Responsibility" cell={this.nameCell} />
          <GridColumn field="email" title="Email" cell={this.nameCell} />
          <GridColumn cell={this.commandCell(this.onRemove)} />
        </Grid>
      </ParentFieldContext.Provider>
    );
  }
}

export default FormGridD2EstablishTeam;