/* eslint-disable max-classes-per-file */
/* eslint-disable class-methods-use-this */
import "core-js/stable";
import React from 'react';
import { render } from 'react-dom';
import {
  Select,
  DateRangePicker,
  DatePicker,
  DateTimeRangePicker,
  Toggle,
  // Switch,
  Modal,
  Tooltip,
  Search,
  Scroll,
  Table,
  Icon
} from '../src';
// import { MultiSelect } from '../dist';

import moment from 'moment';

class Text extends React.Component {
  state = {
    text: 'aaaa',
  }

  addText = () => this.setState({ text: `${this.state.text}aaaabbbcccdddeeefffggghhh` });

  delText = () => this.setState({ text: 'a' });;

  render() {
    return (
      <React.Fragment>
      <div data-tip='ADD' onClick={this.addText}>Add text</div>
      <div onClick={this.delText}>Remove text</div>
      <p>{this.state.text.split('').join('bbbbbb ')}</p>
      </React.Fragment>
    );
  }
}

class App extends React.Component {
  state = {
    modal: false,
    isLoading: true,
    searchText: '',
  };

  toggle = () => {
    this.setState({ modal: !this.state.modal });
  };

  render() {
    const options = [
      { value: 'chocolate', label: 'Chocolate' },
      { value: 'strawberry', label: 'Strawberry' },
      { value: 'vanilla', label: 'Vanilla' },
      { value: 'ch', label: 'Chaaaa' },
      { value: 'st', label: 'Stbbbbb' },
      { value: 'va', label: 'Vannnnnn' },
      { value: 'late', label: 'latebbbb' },
      { value: 'berry', label: 'berrybbbb' },
      { value: 'lla', label: 'llavvvvv' },
      { value: '12345', label: '12345' },
      { value: '54321', label: '54321' },
      { value: '987654', label: '987654' },
    ];
    const tableData = [
      { one: { value: '11Val'}, two: { value: '12Val' }, three: { value: '13Val' } },
      { one: { value: '21Val'}, two: { value: '22Val' }, three: { value: '23Val' } },
      { one: { value: '31Val'}, two: { value: '32Val' }, three: { value: '33Val' } },
      { one: { value: '41Val'}, two: { value: '42Val' }, three: { value: '43Val' } },
      { one: { value: '51Val'}, two: { value: '52Val' }, three: { value: '53Val' } },
      { one: { value: '61Val'}, two: { value: '62Val' }, three: { value: '63Val' } },
      { one: { value: '71Val'}, two: { value: '72Val' }, three: { value: '73Val' } },
      { one: { value: '81Val'}, two: { value: '82Val' }, three: { value: '83Val' } },
      { one: { value: '91Val'}, two: { value: '92Val' }, three: { value: '93Val' } },
      { one: { value: '101Val'}, two: { value: '102Val' }, three: { value: '103Val' } },
      { one: { value: '111Val'}, two: { value: '112Val' }, three: { value: '113Val' } },
    ];
    const tableColumns = [
      { key: 'one', header: 'Первый столбец' },
      { key: 'two', header: 'Второй столбец' },
      { key: 'three', header: 'Третий столбец' },
    ];

    return (
      <>
        <br/>
        Select:
        <Select
          options={options}
          onChange={(r) => console.log('select:', r)}
        />
        <br/>
        DateRangePicker:
        <div>
          <DateRangePicker options={{}} value={{start: '01.09.2019', end: moment().add('1', 'day')}} onChange={(r) => console.log('daterange:', r)} />
        </div>
        <br/>
        DatePicker:
        <div>
          <DatePicker options={{}} value='07.10.2019' onChange={(r) => console.log('date:', r)} />
        </div>
        <br/>
        DateTimeRangePicker:
        <div>
          <DateTimeRangePicker options={{}} value={{start: '01.09.2019', end: moment().add('1', 'day')}} onChange={(r) => console.log('datetimerange:', r)} />
        </div>
        <br/>
        Toggle button:
        <div>
          <Toggle leftLabel='left' rightLabel='right' onChange={(r) => console.log('toggle:', r)} />
        </div>
        <br/>
        Icons:
        <Icon name='face' />
        <Icon name='search' />
        <br/>
        Toggle button disabled:
        <div>
          <Toggle leftLabel='left' disabled rightLabel='right' onChange={(r) => console.log('toggle:', r)} />
        </div>
        <br/>
        {/* Switch:
        <div>
          <Switch />
        </div> */}
        <div style={{
          position: 'relative',
          marginLeft: '0em',
          display: 'inline-block',
        }}>
          <Tooltip offset='left' event='hover' closeButton title='assdfg'>
            aaaaaaa
            <br/>
            bbbbbbb
            <br/>
            CCCCCCC
            <br/>
            ddddddd
            <br/>
            fffffff
          </Tooltip>
          Modal:
        </div>
        <div style={{
          width: '3em',
          height: '1.5em',
          background: 'black',
        }}
        onClick={this.toggle}
        />
        <Modal isOpen={this.state.modal}>
          <Modal.Header toggle={this.toggle}>Title</Modal.Header>Ыс
          <Modal.Body>
            sklsfs;l sjdl;jgs ;sdfj vviosemlsmvs mvm
            { this.state.isLoading && <div className='omni-modal__loader'/> }
          </Modal.Body>
          <Modal.Footer>Содержимое футера</Modal.Footer>
        </Modal>
         <br/>
        <span>Multiselect:</span>
        <Select
          options={options}
          isMulti
          onChange={(r) => console.log('multiselect:', r)}
        />
        <br/>
        <span>Scroll:</span>
        <div className='omni-layout-cssScrollbar' style={{ height: '100px' }}>
        {/* <Scroll> */}
          <div style={{ height: '200px' }}>dgsgsdg</div>
          <Text/>
        {/* </Scroll> */}
        </div>
        <br/>
        Search:
        <Search
          onChange={(v) => {
            const res = options.filter((item) => {
              const val = item.value.toLowerCase();
              return val.includes(v.toLowerCase());
            }).map((val) => val.value);
            this.setState({ searchText: res });
          }}
          result={this.state.searchText}
          onClickResult={(v) => {
            console.log('onclick', v);
            this.setState({ searchText: [] });
          }}
        />
        Table:
        <div style={{ height: '300px' }}>
          <Table
            filtering={true}
            autoHeight
            data={tableData}
            loading={false}
            columns={tableColumns}
            sortableColumn={'name'}
            order={'asc'}
          />
        </div>
      </>
    );
  }
}


/* eslint-env browser */
render(<App />, document.getElementById('point'));