import React from 'react';
import ReactDOM from 'react-dom';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { TextBox } from '@progress/kendo-react-inputs';
import { Form, Field } from '@progress/kendo-react-form';
import { Input } from '@progress/kendo-react-inputs';

import { FormInput, FormComboBox } from '../form-component';
import { requiredValidator } from '../validators';

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

const TextInputWithValidation = (fieldRenderProps) => {
  const { validationMessage, visited, ...others } = fieldRenderProps;
  return (
    <div>
      <Input {...others} />
      {visited && validationMessage && (
        <div role="alert" className="k-form-error k-text-start">
          {validationMessage}
        </div>
      )}
    </div>
  );
};

export class NameCell extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

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

    return <td>{dataItem.inEdit ? <Field component={TextInputWithValidation} name={`${this.props.field}`} validator={requiredValidator} /> : this.props.dataItem[this.props.field || '']}</td>;
  }
}