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

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

let localizedData = [];
let tabData = '';

export const setDropDownData = (initialData, tabName) => {
  tabData = tabName;
  localizedData = initialData;
};

export class DropDownCell extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      responsibility: '', // initialize the responsibility property
    };
  }

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

    this.setState({
      responsibility: e.value.value,
    });
  };

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

    return (
      <td>
        {dataItem.inEdit ? (
          <>
            {tabData === 'D2EstablishTeam' ? (
              <>
                <DropDownList
                  style={{
                    width: '200px',
                  }}
                  onChange={this.handleChange}
                  value={localizedData.find((c) => c.value === dataValue)}
                  data={localizedData}
                  textField="text"
                />
                {this.state.responsibility === ERCCA.model.user.user_acc_level.Others && (
                  <TextBox
                    placeholder="State the responsibility"
                    style={{
                      width: '400px',
                    }}
                  />
                )}
              </>
            ) : tabData === 'D3ContainmentAction' ? (
              <>
                <DropDownList
                  style={{
                    width: '200px',
                  }}
                  onChange={this.handleChange}
                  value={localizedData.find((c) => c.value === dataValue)}
                  data={localizedData}
                  textField="text"
                />
              </>
            ) : (
              dataValue // If tabName is not D2Establish or D3ContainmentAction, display just the data value
            )}
          </>
        ) : (
          dataValue // If not in edit mode, display just the data value
        )}
      </td>
    );
  }
}