<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="ag-data-grid.html">
  <style>
    body {
      font-family: sans-serif;
      font-size: 14pt;
      color: rgba(0, 0, 0, 0.87);
    }
    ::shadow /deep/ .phoneNum, ::shadow /deep/ .email {
      text-decoration: none;
      font-size: 0.9em;
    }
    ::shadow /deep/ .phoneNum {
      color: #ff4080;
    }
    ::shadow /deep/ .email {
      color: #5C6BC0;
    }
    ::shadow /deep/ .lastName {
      font-size: 1.2em;
      text-transform: uppercase;
      color: rgba(0, 0, 0, 0.54);
    }
    ::shadow /deep/ .online {
      color: #4CAF50;
    }
    ::shadow /deep/ .away {
      color: #FFEB3B;
    }
    ::shadow /deep/ .offline {
      color: #BDBDBD;
    }
  </style>
  </head>
<body>
  <ag-data-grid id="contactsGrid"
    summary="Displays your contacts in a tabular format"
    pageSize=10
    responsiveWidth="1200"
    defaultSortKey="lastName"
    defaultSortAscending>

    <!-- Search contacts-->
    <ag-data-grid-search label="Search Contacts"></ag-data-grid-search>

    <!-- Filter for circles -->
    <ag-data-grid-filter-select multiple key="status" label="Show contacts that are">
      <ag-data-grid-filter-select-item checked label="Online" value="online"></ag-data-grid-filter-select-item>
      <ag-data-grid-filter-select-item checked label="Away" value="away"></ag-data-grid-filter-select-item>
      <ag-data-grid-filter-select-item checked label="Offline" value="offline"></ag-data-grid-filter-select-item>
    </ag-data-grid-filter-select>

    <!-- Toggle to allow filtering by online mode-->
    <ag-data-grid-filter-toggle key="withPhone" label="Only show contacts that have a phone number" ></ag-data-grid-filter-toggle>

    <!-- Columns, sorting and cell templates -->
    <ag-data-grid-column sortable label="First Name" key="firstName"
      minFlex="3" flex="4" priority="3"/>
      <template>{{ item.firstName }}</template>
    </ag-data-grid-column>

    <ag-data-grid-column sortable label="Last Name" key="lastName" minFlex="4" flex="5" priority="1"/>
      <template>
        <span class="lastName">
          {{ item.lastName }}
        </span>
      </template>
    </ag-data-grid-column>

    <ag-data-grid-column label="Phone Number" key="phone"
      minFlex= "3" flex="4" priority="2" align="center"/>
      <template if="{{ item.phone !== ''}}">
        <a class='phoneNum' href="tel://{{item.phone}}">{{ item.phone }}</a>
      </template>
    </ag-data-grid-column>

    <ag-data-grid-column label="Email" key="email"
      minFlex= "6" flex="6" priority="5" align="left"/>
      <template if="{{ item.email !== ''}}">
        <a class='email' href="mailto://{{item.email}}">{{ item.email }}</a>
      </template>
    </ag-data-grid-column>

    <ag-data-grid-column sortable label="Status" key="status"
      minFlex="1" flex="3" priority="4" align="center"/>
      <template>
        <template if="{{item.status === 'online'}}">
          <core-icon gridOnly class="online" icon="radio-button-on" alt="{{ item.firstName }} {{ item.lastName }} is online" title="online"></core-icon>
          <span moreInfoOnly> {{ item.status }} </span>
        </template>
        <template if="{{item.status === 'away'}}">
          <core-icon gridOnly class="away" icon="schedule" alt="{{ item.firstName }} {{ item.lastName }} is away" title="away"></core-icon>
          <span moreInfoOnly> {{ item.status }} </span>
        </template>
        <template if="{{item.status === 'offline'}}">
          <core-icon gridOnly class="offline" icon="block" alt="{{ item.firstName }} {{ item.lastName }} is offline" title="offline"></core-icon>
          <span moreInfoOnly> {{ item.status }} </span>
        </template>
      </template>
    </ag-data-grid-column>
  </ag-data-grid>

  <script type="text/javascript">

// Add the data source to the grid
window.addEventListener('polymer-ready', function(e) {
  var grid = document.getElementById('contactsGrid');
  grid.dataSource = {
    // This method is expected by the data-grid. It is responsible for
    // searching, filtering and sorting the data when user takes an action
    // such as changing the filters or searching.
    // This is also called on the initial load to populate the grid.
    fetch: function(search, sort, filters) {
      return filterAndSortContacts(search, sort, filters);
    }
  };

  var contacts = generateContacts(100);
  function filterAndSortContacts(search, sort, filters) {
    var filtered = contacts.filter(function(c) {
      var isMatch = true;

      // Search keyword
      var keyword = search.keyword;
      if (keyword) {
        isMatch = contains(c.firstName, keyword) ||
          contains(c.lastName, keyword) ||
          contains(c.phone, keyword);
      }

      // Status filter
      var statusFilterValues = filters['status']; // status is the "key" defined on the filter
      if (statusFilterValues) {
        isMatch = isMatch && statusFilterValues.indexOf(c.status) > -1;
      }

      // Only with phone number filter
      var onlyShowWithPhoeNumber = filters['withPhone']; // withPhone is the "key" defined on the filter
      if (onlyShowWithPhoeNumber) {
        isMatch = isMatch && !!c.phone;
      }

      return isMatch;
    });

    // Sort
    return filtered.sort(sorter);

    function sorter(item1, item2) {
      var key = sort.key;
      var ascending = sort.ascending;
      var first = item1[key];
      var second = item2[key];
      if (!ascending) {
        first = item2[key];
        second = item1[key];
      }

      var statusPriority = {
        'online': 3,
        'away': 2,
        'offline': 1
      };

      if (key === 'status') {
        first = statusPriority[first];
        second = statusPriority[second];
        return (first - second);
      }
      if (key === 'firstName' || key === 'lastName') {
        return first.localeCompare(second);
      }
    }
  }

  // Helpers
  function generateContacts(n) {
    var firstNames = ['Isabella', 'Sophia', 'Emma', 'Olivia', 'Isabella', 'Mia', 'Ava', 'Lily', 'Zoe', 'Emily', 'Chloe', 'Layla', 'Madison', 'Madelyn', 'Abigail', 'Aubrey', 'Charlotte', 'Amelia', 'Ella', 'Kaylee', 'Avery', 'Aaliyah', 'Hailey', 'Hannah', 'Addison', 'Riley', 'Harper', 'Aria', 'Arianna', 'Mackenzie', 'Lila', 'Evelyn', 'Adalyn', 'Grace', 'Brooklyn', 'Ellie', 'Anna', 'Kaitlyn', 'Isabelle', 'Sophie', 'Scarlett', 'Natalie', 'Leah', 'Sarah', 'Nora', 'Mila', 'Elizabeth', 'Lillian', 'Kylie', 'Audrey', 'Lucy', 'Maya', 'Annabelle', 'Makayla', 'Gabriella']
    var lastNames = ['McDonald', 'Howard-Kelly', 'Brown', 'Wilson', 'Rodríguez', 'Diaz', 'Jones', 'Anderson', 'Lee', 'Robinson', 'Cooper-Brown', 'Sanchez', 'Campbell', 'Collins-Edwards', 'Campbell-Diaz', 'Parker', 'Cruz', 'Torres-Bell', ];
    var firstNameCursor = 0;
    var lastNameCursor = 0;

    var results = [];
    for (var i = 0; i < n; i++) {
      var fname = getFirstName();
      var lname = getLastName();
      results.push({
        firstName: fname,
        lastName: lname,
        phone: createPhone(),
        email: fname + '.' + lname + '@example.org',
        status: getStatus()
      })
    }

    return results;

    function rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    function getStatus() {
      var tri = rand(0, 2);
      if (tri === 0) {
        return 'online';
      }
      if (tri === 1) {
        return 'away';
      }
      if (tri === 2) {
        return 'offline';
      }
    }

    function createPhone() {
      // not everyone has a phone number
      if (rand(0, 1) == 1) {
        return '';
      }
      return rand(100, 999) + '-' + rand(100, 999) + '-' + rand(1000, 9999);
    }

    function getFirstName() {
      if (firstNameCursor === firstNames.length) {
        firstNameCursor = 0;
      }
      var name = firstNames[firstNameCursor];
      firstNameCursor++;
      return name;
    }

    function getLastName() {
      if (lastNameCursor === lastNames.length) {
        lastNameCursor = 0;
      }
      var name = lastNames[lastNameCursor];
      lastNameCursor++;
      return name;
    }
  }
});

function contains(str, s) {
  return str.toLowerCase().indexOf(s.toLowerCase()) > -1;
}
  </script>
</body>
</html>