import * as React from 'react';
import {SFC} from 'react';
import {Scrollbars} from './../../../components';

import {Datagrid, DatagridCardsView, DatagridTableView} from './../../../components/Datagrid';
import {ColumnHeaderProperty, Query, ViewMode} from './../../../components/Datagrid/models';

const datagridProperties = [
  {sortKey: 'name', name: 'Name'},
  {sortKey: 'email', name: 'Email'},
  {sortKey: 'phone', name: 'Phone'},
  {sortKey: 'address', name: 'Address', thStyle: {flex: 2}},
];

const query = {
  limit: 50,
  skip: 0,
  sort: 'name',
};

const data = [
  {
    id: '591b851b0ecc0efba5d6a8ff',
    name: 'Emma Bell',
    email: 'emmabell@solaren.com',
    phone: '+1 (916) 400-3830',
    address: '202 Regent Place, Convent, Utah, 2410',
  },
  {
    id: '591b851b5989fc95c3d9a821',
    name: 'Irma Reed',
    email: 'irmareed@solaren.com',
    phone: '+1 (804) 448-3011',
    address: '350 Gallatin Place, Gordon, North Carolina, 7386',
  },
  {
    id: '591b851b5bb9f941e11c76ba',
    name: 'Delgado Knapp',
    email: 'delgadoknapp@solaren.com',
    phone: '+1 (893) 542-3984',
    address: '454 Cove Lane, Westwood, Northern Mariana Islands, 7353',
  },
  {
    id: '591b851b8a71caa873073f2b',
    name: 'Marissa Wilder',
    email: 'marissawilder@solaren.com',
    phone: '+1 (893) 418-3661',
    address: '605 Rost Place, Rew, Delaware, 8809',
  },
  {
    id: '591b851b48693c73568dc89e',
    name: 'Claudine Alvarez',
    email: 'claudinealvarez@solaren.com',
    phone: '+1 (999) 598-3649',
    address: '502 Bragg Street, Imperial, South Carolina, 9047',
  },
  {
    id: '591b851b38676997a2a27b0c',
    name: 'Walsh Powers',
    email: 'walshpowers@solaren.com',
    phone: '+1 (864) 544-2598',
    address: '265 Manhattan Court, Bison, North Carolina, 2567',
  },
];

const SimpleDatagrid: SFC<{}> = () => (

  <Datagrid
    noFilters
    noSearchBarCollapse
    noSearchBy
    noTotalInHeader
    noViewModeButton
    properties={datagridProperties}
    query={query}
    searchInputPlaceholder="Search"
    total={data.length}
    viewMode={ViewMode.Table}
    onChangeQuery={handleQueryChange}
    onSearchTerm={handleSearchTermChange}
  >
    <DatagridTableView
      properties={datagridProperties}
    >
      {data.map(item => (
        <div key={item.id} className="grid-tr">
          <div className="grid-td">{item.name}</div>
          <div className="grid-td">{item.email}</div>
          <div className="grid-td">{item.phone}</div>
          <div className="grid-td" style={{flex: 2}}>{item.address}</div>
        </div>
      ))}
    </DatagridTableView>
  </Datagrid>
);

SimpleDatagrid.displayName = 'SimpleDatagrid';

const handleQueryChange = (query: Query) => {
  console.log('QUERY', query);
};

const handleSearchTermChange = (searchTerm: string) => console.log('SEARCH TERM', searchTerm);

export {SimpleDatagrid};