<div class="toolbar">
  Switch Theme&nbsp;
  <og-toggle-switch id="theme-switch"></og-toggle-switch>
</div>

<og-card name="Datatable">
  <div slot="content">
    <og-datatable id="datatable"></og-datatable>
  </div>
</og-card>

body {
  font-family: Roboto;
  margin: 0px;
}

.toolbar {
  background-color: var(--OG-COLOR-SHADE--0--80);
  border-bottom: solid 1px var(--OG-COLOR-PRIMARY--100);
  height: 48px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 16px;
}

og-card {
  display: block;
  padding: 0px 0px;
  width: 100%;
  max-width: 900px;
  margin: auto;
}

#selected {
  padding-top: 20px;
  padding-bottom: 20px;
}

const tableData = getMockData();

const tableColumns = [
  {
    property: 'name',
    title: 'Label'
  },
  /*
  {
    property: 'city',
    title: 'City'
  },
  */
  {
    property: 'date',
    title: 'Date',
    sorter: (a, b) => {
      // this example requires momentjs
      return moment(a, 'DD.MM.YYYY').valueOf() - moment(b, 'DD.MM.YYYY').valueOf();
    }
  },
  {
    property: 'activity',
    title: 'Activity',
    formatter: 'star',
  },
  {
    property: 'activity',
    title: 'Activity',
    formatter: (cell, formatterParams, onRendered) => {
      let colored = '';
      for (let i = 0; i < cell.getValue(); i++) {
        const hue = 150 - (37.5 * i);
        colored += '<span style="color: hsl(' + hue + ',100%,40%)">&#10687;</span>';
      }
      return '<strong>' + colored + '</strong>';
    }
  },
];

const scrollData = {
  type: 'scrolled',
  provider: {
    type: 'default',
    getData: async () => tableData
  }
};

const scrollLazyData = {
  type: 'scrolled',
  options: {
    requestLimit: 10
  },
  provider: {
    type: 'lazy',
    getData: async (page, size, sorters) => {
      let data = tableData;
      if (Array.isArray(sorters) && sorters.length > 0) {
        data = [...data];
        sorters.forEach(sorter => {
          data.sort((a, b) => {
            const fa = a[sorter.field];
            const fb = b[sorter.field];
            const result = fa < fb ? -1 : (fa > fb ? 1 : 0);
            return result * (sorter.dir === 'desc' ? -1 : 1);
          });
        });
      }
      return {
        totalRows: data.length,
        data: data.length < size ? data.length : data.slice((page - 1) * size, page * size)
      };
    }
  }
};

const paginatedData = {
  type: 'paginated',
  options: {
    pageSize: 5
  },
  provider: {
    type: 'default',
    getData: async () => tableData
  }
};

const paginatedLazyData = {
  type: 'paginated',
  options: {
    pageSize: 5
  },
  provider: {
    type: 'lazy',
    getData: async (page, size, sorters) => {
      let data = tableData;
      if (Array.isArray(sorters) && sorters.length > 0) {
        data = [...data];
        sorters.forEach(sorter => {
          data.sort((a, b) => {
            const fa = a[sorter.field];
            const fb = b[sorter.field];
            const result = fa < fb ? -1 : (fa > fb ? 1 : 0);
            return result * (sorter.dir === 'desc' ? -1 : 1);
          });
        });
      }
      return {
        totalRows: data.length,
        data: data.length < size ? data.length : data.slice((page - 1) * size, page * size)
      };
    }
  }
};

const tableConfig = {
  noDataMessage: 'No items available',
  // dataService: scrollData,
  // dataService: scrollLazyData,
  dataService: paginatedData,
  // dataService: paginatedLazyData,
  columns: tableColumns
}

const datatable = document.querySelector('#datatable');
datatable.config = tableConfig;
datatable.addEventListener('itemSelected', e => {
  document.querySelector('og-card').setAttribute('name', `Datatable (selected: ${e.detail.name})`);
});

// ================ code for switching themes ================
document.querySelector('body').setAttribute('class', 'og-theme--light');

document.querySelector('#theme-switch').addEventListener('changed', e => {
  const theme = e.detail ? 'dark' : 'light';
  document.querySelector('body').setAttribute('class', 'og-theme--' + theme);
});

// ================ generate mock data ================
function getMockData() {
  return [{id: 1000, date: '25.07.2019', name: 'Emerald Baird', city: 'Langley', activity: 4}, {id: 1001, date: '14.06.2019', name: 'Pandora Bauer', city: 'Lesve', activity: 5}, {id: 1002, date: '20.05.2019', name: 'Stacy Preston', city: 'Chañaral', activity: 1}, {id: 1003, date: '14.09.2019', name: 'Paul Morin', city: 'Nanded', activity: 2}, {id: 1004, date: '16.08.2019', name: 'Serina Bentley', city: 'Ahmadpur East', activity: 4}, {id: 1005, date: '03.06.2019', name: 'Hayden Owens', city: 'Patna', activity: 1}, {id: 1006, date: '10.09.2019', name: 'Georgia Oneal', city: 'Brusson', activity: 2}, {id: 1007, date: '31.05.2019', name: 'Carolyn Holloway', city: 'Hamoir', activity: 2}, {id: 1008, date: '30.10.2019', name: 'Phoebe Jefferson', city: 'Chetwynd', activity: 3}, {id: 1009, date: '07.05.2019', name: 'Barrett Hardy', city: 'Ottawa-Carleton', activity: 3}, {id: 1010, date: '26.11.2019', name: 'Tucker Gilliam', city: 'Longchamps', activity: 1}, {id: 1011, date: '31.10.2019', name: 'Lareina Key', city: 'Aklavik', activity: 2}, {id: 1012, date: '30.12.2019', name: 'Iola Taylor', city: 'Pocatello', activity: 4}, {id: 1013, date: '20.05.2019', name: 'Aileen Bowers', city: 'Wisbech', activity: 2}, {id: 1014, date: '19.09.2019', name: 'Xenos Bright', city: 'Levin', activity: 2}, {id: 1015, date: '01.07.2019', name: 'Nehru Lott', city: 'Kampenhout', activity: 1}, {id: 1016, date: '20.03.2020', name: 'Sylvester English', city: 'Salamanca', activity: 3}, {id: 1017, date: '30.11.2019', name: 'Yardley Lancaster', city: 'Yamuna Nagar', activity: 5}, {id: 1018, date: '25.08.2019', name: 'Porter Dudley', city: 'Kearny', activity: 1}, {id: 1019, date: '22.02.2020', name: 'Aladdin Holland', city: 'Augsburg', activity: 5}, {id: 1020, date: '04.04.2020', name: 'Joan Kelly', city: 'Joliet', activity: 1}, {id: 1021, date: '10.09.2019', name: 'Brenden Cabrera', city: 'San Ignacio', activity: 2}, {id: 1022, date: '06.07.2019', name: 'Porter Nicholson', city: 'Ellikom', activity: 1}, {id: 1023, date: '05.10.2019', name: 'Melissa Tran', city: 'Tramutola', activity: 1}, {id: 1024, date: '21.08.2019', name: 'Nicholas Allison', city: 'Olathe', activity: 5}, {id: 1025, date: '25.05.2019', name: 'Paula Joseph', city: 'Quenast', activity: 2}, {id: 1026, date: '19.01.2020', name: 'Nolan Griffith', city: 'San Sostene', activity: 5}, {id: 1027, date: '18.06.2019', name: 'Burke Gill', city: 'Tumba', activity: 5}, {id: 1028, date: '29.12.2019', name: 'Hayley Rasmussen', city: 'Bergerac', activity: 3}, {id: 1029, date: '25.11.2019', name: 'Jayme Sexton', city: 'Anamur', activity: 1}, {id: 1030, date: '27.04.2019', name: 'Hilary Atkinson', city: 'Port Coquitlam', activity: 1}, {id: 1031, date: '17.03.2020', name: 'Yoshi Buck', city: 'Evansville', activity: 2}, {id: 1032, date: '13.08.2019', name: 'Nissim Farmer', city: 'Timon', activity: 1}, {id: 1033, date: '21.01.2020', name: 'Breanna English', city: 'Bozeman', activity: 4}, {id: 1034, date: '20.04.2019', name: 'Lunea Barnett', city: 'Feldkirch', activity: 4}, {id: 1035, date: '30.03.2020', name: 'Lani Knowles', city: 'Paularo', activity: 2}, {id: 1036, date: '07.10.2019', name: 'Edan Chang', city: 'Weelde', activity: 3}, {id: 1037, date: '13.11.2019', name: 'Kellie Alvarado', city: 'Sevilla', activity: 3}, {id: 1038, date: '16.02.2020', name: 'Alyssa Shaw', city: 'Maasmechelen', activity: 5}, {id: 1039, date: '03.06.2019', name: 'Rhoda Dalton', city: 'Vellore', activity: 1}, {id: 1040, date: '01.04.2020', name: 'Nomlanga Bolton', city: 'Bergeggi', activity: 5}, {id: 1041, date: '06.07.2019', name: 'Serina Mosley', city: 'Beausejour', activity: 4}, {id: 1042, date: '14.09.2019', name: 'Ross Armstrong', city: 'Gurgaon', activity: 4}, {id: 1043, date: '03.06.2019', name: 'Ria Combs', city: 'Grand-Halleux', activity: 5}, {id: 1044, date: '04.02.2020', name: 'Shea Morin', city: 'Giove', activity: 3}, {id: 1045, date: '03.03.2020', name: 'Clayton Cochran', city: 'Eberswalde-Finow', activity: 4}, {id: 1046, date: '09.10.2019', name: 'Valentine Wilkinson', city: 'Flint', activity: 2}, {id: 1047, date: '27.09.2019', name: 'India Joseph', city: 'Alert Bay', activity: 5}, {id: 1048, date: '07.08.2019', name: 'Dora George', city: 'Arras', activity: 5}, {id: 1049, date: '17.07.2019', name: 'Daphne Stuart', city: 'Saint-Louis', activity: 4}];
}