import React, { Component } from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import Dialog from 'material-ui/Dialog';
import { deepOrange500 } from 'material-ui/styles/colors';
import FlatButton from 'material-ui/FlatButton';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MenuItem from 'material-ui/MenuItem';
import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
import APPCONFIG from 'constants/Config';
import IconButton from 'material-ui/IconButton';
import PersonAdd from 'material-ui/svg-icons/social/person-add';
import InfoOutline from 'material-ui/svg-icons/action/info-outline';

import Badge from 'material-ui/Badge';
import DataTables from 'material-ui-datatables';

//import contact list examples
import ListExampleSimple from '../../../../ui/routes/lists/components/Simple';
import ListExampleSelectable from '../../../../ui/routes/lists/components/Selectable';
import ListExampleMessages from '../../../../ui/routes/lists/components/Messages';

//floating actions and "add" button
import ContentAdd from 'material-ui/svg-icons/content/add';
import FloatingActionButton from 'material-ui/FloatingActionButton';

import ActionGrade from 'material-ui/svg-icons/action/grade';

import ToolbarSection from '../../../../ui/routes/components/components/Toolbar.js';
const $ = require('jquery');
$.DataTable = require('datatables.net');


const IconButtonExampleTouch = () => (
  <div>
    <IconButton
      iconClassName="material-icons"
      tooltip="Cancel"
    >
      delete
    </IconButton>
    <IconButton
      iconClassName="material-icons"
      tooltip="Edit"
    >
      edit_mode
    </IconButton>
  </div>
);

const IconButtonExampleTouch2 = () => (
  <FlatButton href="#/app/form/steppers"><i className="nav-icon material-icons">schedule</i><span className="nav-text"></span></FlatButton>
);

const IconButtonExampleTouch3 = () => (
  <div>
    <a href="" > 1800 HI...</a>
  </div>
);

const IconButtonExampleTouch4 = () => (
  <div>
    <a href="#" > 2222 S...</a>
  </div>
);

const IconButtonExampleTouch5 = () => (
  <div>
    <a href="#" >Michael Weinberg</a>
     {/* <IconButton
      iconClassName="material-icons"
      tooltip="Text"
    >
      phone_android
    </IconButton> */}
    {/* <IconButton
      iconClassName="material-icons"
      tooltip="Call"
    >
      sms
    </IconButton>  */}
  </div>
);

const IconButtonExampleTouch6 = () => (
  <div>
    <a href="" >11:00AM | 8/11/2017</a>
  </div>
);

const IconButtonExampleTouch8 = () => (
  <div>
    <IconButton
      iconClassName="material-icons"
      tooltip="Phone"
    >
      phone
    </IconButton>
  </div>
);



// const IconButtonExampleTouch7 = () => (
//     <IconButton
//       iconClassName="material-icons"
//       tooltip="Text"
//     >
//       phone_android
//     </IconButton>
//     <IconButton
//       iconClassName="material-icons"
//       tooltip="Call"
//     >
//       sms
//     </IconButton>
// );


// import QueueAnim from 'rc-queue-anim';
// import RubixTables from 'RubixTables';

const styles = {
  datatable: {
    width: '100%'
  },
  container: {
    textAlign: 'left',
  },
  component: {
    margin: '20px 10px',
  },
  titleStyle: {
    fontSize: 22,
    color: deepOrange500,
  },
  footerToolbarStyle: {
    padding: '0 100px',
  },
  tableStyle: {
    tableLayout: 'auto',
  },
  tableBodyStyle: {
    overflowX: 'scroll',
  },
  tableWrapperStyle: {
    padding: 2,
  },
};

const muiTheme = getMuiTheme({
  palette: {
    accent1Color: deepOrange500,
  },
});

const columns = [
  {
    title: 'Day',
    data: 'day',
  },
  {
    title: 'Time',
    data: 'time',
  },
  {
    title: 'Pickup',
    data: 'pickup',
  },
  {
    title: 'Destination',
    data: 'destination',
  },
  {
    title: 'Status',
    data: 'status',
  }, {
    title: 'Details',
    data: 'details',
  },
];

const TABLE_COLUMNS = [
  {
    key: 'sodium',
    label: 'Sodium (mg)',
  }, {
    key: 'calcium',
    label: 'Calcium (%)',
  }, {
    key: 'iron',
    label: 'Iron (%)',
  },
];

const TABLE_COLUMNS_TOOLTIP = [
  {
    key: 'name',
    label: 'Dessert (100g serving)',
    tooltip: 'Dessert (100g serving)',
  }, {
    key: 'calories',
    label: 'Calories',
    tooltip: 'Calories',
  }, {
    key: 'fat',
    label: 'Fat (g)',
    tooltip: 'Fat (g)',
  }, {
    key: 'carbs',
    label: 'Carbs (g)',
    tooltip: 'Carbs (g)',
  }, {
    key: 'Member',
    label: 'Member (g)',
    tooltip: 'Member (g)',
  }, {
    key: 'sodium',
    label: 'Sodium (mg)',
    tooltip: 'Sodium (mg)',
  }, {
    key: 'calcium',
    label: 'Calcium (%)',
    tooltip: 'Calcium (%)',
  }, {
    key: 'iron',
    label: 'Iron (%)',
    tooltip: 'Iron (%)',
  },
];

const TABLE_COLUMNS_SORT_STYLE = [
  // {
  //   key: 'Day',
  //   label: 'Day',
  //   tooltip: 'Day',
  //   className: 'mdl-data-table__cell--non-numeric',
  // },
  {
    key: 'Time',
    label: 'Time',
    tooltip: 'Pickup Time',
    sortable: true,
    style: {
      width: 130,
    },
  },
  {
    key: 'Member',
    label: 'Member',
    tooltip: 'Name of the Member',
    sortable: true,
    style: { width: 90, },
  }, 
  {
    key: 'Status',
    label: 'Status',
    sortable: true,
    style: { width: 30, },
  },
  {
    key: 'Pickup',
    label: 'Pickup',
    sortable: true,
    tooltip: "Pickup Address",
    style: { width: 50, },
  },
  {
    key: 'Destination',
    label: 'Destination',
    tooltip: "Destination Address",
    sortable: true,
    style: { width: 50, },
  },
  // {
  //   key: 'Status',
  //   label: 'Status',
  // }, 
  
  // {
  //   key: 'Details',
  //   label: 'Details',
  // },
  
  // {
  //   key: 'memberPhone',
  //   label: 'Phone',
  //   tooltip: 'Mobile phone of the Member',
  //   sortable: false,
  // },
  // {
  //   key: 'ETA',
  //   label: 'ETA',
  //   tooltip: "ETA of Lyft Vehicle",
  //   sortable: true,
  //   style: { width: 50 },
  // },
  {
    key: 'estimatedDuration',
    label: 'Duration',
    tooltip: "Estimated Duration",
    sortable: true,
    style: { width: 20, },
  },
  {
    key: 'estimatedMileage',
    label: 'Mileage',
    tooltip: "Estimated Mileage",
    sortable: true,
    style: { width: 20, },
  },
  {
    key: 'lyftVehicle',
    label: 'Vehicle',
    tooltip: "Color Make and Model of Lyft Vehicle",
    sortable: true,
    style: { width: 120, },
  },
  {
    key: 'licensePlate',
    label: 'Plate',
    tooltip: 'License Plate of Lyft Vehicle',
    sortable: true,
    style: { width: 30, },
  },
  {
    key: 'driverPhone',
    label: 'Driver',
    tooltip: "Driver's (Masked) Phone Number",
    sortable: true,
  },
  {
    key: 'rideID',
    label: 'ID',
    tooltip: 'Q-Ride ID',
    sortable: true,
  },
  {
    key: 'lyftID',
    label: 'Lyft ID',
    tooltip: 'Lyft Ride ID',
    sortable: true,
  },
  {
    key: 'Actions',
    label: 'Actions',
    sortable: false,
  },
];

const TABLE_DATA_TABLE = [
  {
    day: '8/21/2017',
    time: '11:00 AM CST',
    pickup: '1800 Hig...',
    destination: '2222 S...',
    status: 'Scheduled',
    details: <IconButtonExampleTouch />,
  },
  {
    day: '8/21/2017',
    time: '11:00 AM CST',
    pickup: '1800 Hig...',
    destination: '2222 S...',
    status: 'Scheduled',
    details: <IconButtonExampleTouch />,
  },
  {
    day: '8/21/2017',
    time: '11:00 AM CST',
    pickup: '1800 Hig...',
    destination: '2222 S...',
    status: 'Scheduled',
    details: <IconButtonExampleTouch />,
  },
  {
    day: '8/21/2017',
    time: '11:00 AM CST',
    pickup: '1800 Hig...',
    destination: '2222 S...',
    status: 'Scheduled',
    details: <IconButtonExampleTouch />,
  },
  {
    day: '8/21/2017',
    time: '11:00 AM CST',
    pickup: '1800 Hig...',
    destination: '2222 S...',
    status: 'Scheduled',
    details: <IconButtonExampleTouch />,
  },
  {
    day: '8/21/2017',
    time: '11:00 AM CST',
    pickup: '1800 Hig...',
    destination: '2222 S...',
    status: 'Scheduled',
    details: <IconButtonExampleTouch />,
  },
  {
    day: '8/21/2017',
    time: '11:00 AM CST',
    pickup: '1800 Hig...',
    destination: '2222 S...',
    status: 'Scheduled',
    details: <IconButtonExampleTouch />,
  },
  {
    day: '8/21/2017',
    time: '11:00 AM CST',
    pickup: '1800 Hig...',
    destination: '2222 S...',
    status: 'Scheduled',
    details: <IconButtonExampleTouch />,
  },
  {
    day: '8/21/2017',
    time: '11:00 AM CST',
    pickup: '1800 Hig...',
    destination: '2222 S...',
    status: 'Scheduled',
    details: <IconButtonExampleTouch />,
  },
  {
    day: '8/21/2017',
    time: '11:00 AM CST',
    pickup: '1800 Hig...',
    destination: '2222 S...',
    status: 'Scheduled',
    details: <IconButtonExampleTouch />,
  },
];

const TABLE_DATA = [
  {
    Member: <IconButtonExampleTouch5 />,
    // memberPhone: <IconButtonExampleTouch5 />,
    Time: <IconButtonExampleTouch6 />,
    Pickup: <IconButtonExampleTouch3 />,
    Destination: <IconButtonExampleTouch4 />,
    Status: <IconButtonExampleTouch2 />,
    ETA: '11:20AM',
    estimatedDuration: '11:30',
    estimatedMileage: '1.7',
    lyftVehicle: 'Red Toyota Primexa',
    licensePlate: "IL-343444",
    driverPhone: <IconButtonExampleTouch5 />,
    lyftID: 'QQ2323W',
    rideID: '2323QW',
    Actions: <IconButtonExampleTouch />,
  },
  {
    Member: 'Jan Foonie',
    Time: <IconButtonExampleTouch6 />,
    // memberPhone: <IconButtonExampleTouch5 />,
    Pickup: <IconButtonExampleTouch3 />,
    Destination: <IconButtonExampleTouch4 />,
    Status: <IconButtonExampleTouch2 />,
    ETA: '1:20AM',
    estimatedDuration: '4:00',
    estimatedMileage: '4.1',
    lyftVehicle: 'Blue Honda Elan',
    licensePlate: "IL-329R44",
    driverPhone: '(708)-222-2232',
    lyftID: '2323QW',
    rideID: 'Z22323W',
    Actions: <IconButtonExampleTouch />,
  },
];


class Table extends Component {
  componentDidMount() {
    $('#main').DataTable({
      dom: '<"#data-table-wrapper.box box-default table-box table-responsive mdl-shadow--2dp"t>',
      data: TABLE_DATA_TABLE,
      columns,
    });
  }
  shouldComponentUpdate() {
    return false;
  }
  componentWillUnmount() {
    $('#data-table-wrapper')
      .find('#main')
      .DataTable()
      .destroy(true);
  }
  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div style={styles.container} >
          <div style={styles.component}>
            <ToolbarSection />
            <table id="main" className="mdl-data-table" style={styles.datatable} />
          </div>
        </div>
      </MuiThemeProvider>);
  }
}

class Main extends Component {
  constructor(props, context) {
    super(props, context);
    this.handleSortOrderChange = this.handleSortOrderChange.bind(this);
    this.handleFilterValueChange = this.handleFilterValueChange.bind(this);
    this.handleCellClick = this.handleCellClick.bind(this);
    this.handleCellDoubleClick = this.handleCellDoubleClick.bind(this);
    this.handleRowSelection = this.handleRowSelection.bind(this);
    this.handlePreviousPageClick = this.handlePreviousPageClick.bind(this);
    this.handleNextPageClick = this.handleNextPageClick.bind(this);
    this.handlePersonAddClick = this.handlePersonAddClick.bind(this);
    this.handleInfoClick = this.handleInfoClick.bind(this);

    this.state = {
      data: TABLE_DATA,
      page: 1,
    };
  }

  handleSortOrderChange(key, order) {
    console.log('key:' + key + ' order: ' + order);
  }

  handleFilterValueChange(value) {
    console.log('filter value: ' + value);
  }

  handleCellClick(rowIndex, columnIndex, row, column) {
    console.log('rowIndex: ' + rowIndex + ' columnIndex: ' + columnIndex);
  }

  handleCellDoubleClick(rowIndex, columnIndex, row, column) {
    console.log('rowIndex: ' + rowIndex + ' columnIndex: ' + columnIndex);
  }

  handleRowSelection(selectedRows) {
    console.log('selectedRows: ' + selectedRows);
  }

  handlePreviousPageClick() {
    console.log('handlePreviousPageClick');
    this.setState({
      data: TABLE_DATA,
      page: 1,
    });
  }

  handleNextPageClick() {
    console.log('handleNextPageClick');
    this.setState({
      data: TABLE_DATA_NEXT,
      page: 2,
    });
  }

  handlePersonAddClick() {
    console.log('handlePersonAddClick');
  }

  handleInfoClick() {
    console.log('handleInfoClick');
  }

  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div style={styles.container}>
          <div style={styles.component}>

            <Card style={{ margin: 2 }}>
              <ToolbarSection />
              <DataTables
                title={''}
                responsive={true}
                height={'auto'}
                stripedRows={true}
                selectable={true}
                RowSizeLabel={'Rows'}
                multiSelectable={true}
                showRowHover={true}
                columns={TABLE_COLUMNS_SORT_STYLE}
                data={TABLE_DATA}
                showCheckboxes={false}
                showHeaderToolbar={true}
                onCellClick={this.handleCellClick}
                onCellDoubleClick={this.handleCellDoubleClick}
                onFilterValueChange={this.handleFilterValueChange}
                onSortOrderChange={this.handleSortOrderChange}
                count={2}
              />
            </Card>
            <Card style={{ backgroundColor: "#E8E8E8" }}>
              <CardHeader
                title="Expandable card"
                subtitle="Subtitle"
                actAsExpander
                showExpandableButton
                titleColor="#8B8B8B"
                subtitleColor="#e1e1e1"
                style={{ color: '#fff' }}
              />
              <CardText
                expandable
                style={{ color: '#212121' }}
              >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Donec mattis pretium massa.
          </CardText>
              <CardActions
                expandable
                style={{ color: '#fff' }}
              >
                <FlatButton label="Action1" style={{ color: '#fff' }} />
                <FlatButton label="Action2" style={{ color: '#fff' }} />
              </CardActions>
            </Card>
          </div>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default Main;