import React from 'react';
import { Dropdown } from '@opuscapita/react-component-example';

export default class ReactView extends React.Component {
  render() {
    return (
      <Dropdown
        localizationTexts={{
          searchBy: 'Search by',
          by: 'By',
          close: 'Close',
          select: 'Select',
          "field.fieldName1": 'my field',
          "field.fieldName2": 'another field'
          "column.fieldName1": 'My field',
          "column.fieldName2": 'Another field',
          "previous": "PREV",
          "next": "NEXT",
          "loading": "LOADING",
          "noData": "NODATA",
          "page": "PAGE",
          "of": "OF",
          "rows": "ROWS",
          "pageJump": "JUMP",
          "rowsSelector": "RPP",
        }}
        isDisabled={false}
        value={{ value: 'a', label: 'The first letter in the alphabet, transformed with String.toLowerCase' }}
        loadOptions={
          () => Promise.resolve([
            { label: 'a_DisplayValue', value: 'a' }
            { label: 'b_DisplayValue', value: 'b' }
          ])
        }
        onSelect={() => { /* Capture new selected value */ }}
        handleChange={({ value, setState, onSelect }) => {
          setState({ value });
          onSelect(value);
          return value;
        }}
        modal={{
          title: 'Search entries',
          fields: [
            'fieldName1',
            'fieldName2',
          ],
          loadOptions: () => Promise.resolve({
            data: [
              {
                fieldName1: 'a_DisplayValue',
                fieldName2: 'a_AnotherDisplayValue'
                value: 'a'
              },
              {
                fieldName1: 'b_DisplayValue',
                fieldName2: 'b_AnotherDisplayValue'
                value: 'b'
              },
            ],
            totalCount: 0
          }),
          components: {
            LeftPanel: ({ selectedRow }) => (<div></div>),
            RightPanel: ({ selectedRow }) => (<div></div>),
          }
        }}
      />
    );
  }
}