import React from 'react';
import Nav from '../src';
import { companies, projectsByCompany, counts } from './data';

const onSelect = (option) => {
  window.alert(JSON.stringify(option, null, 2));
};

const BasicExample = (props = {}) => (
  <Nav.Tiers
    initialData={companies}
    onOpen={() => console.log('opened')}
    root='All Companies'
    triggerZone='Companies and Projects'
    searchOnKeyDown={true}
  >
    <Nav.Tier
      id='id'
      label='name'
      onDrilldown={(option, cb, errCb) => {
        // replicate request wait
        window.setTimeout(() => cb(projectsByCompany[option.id]), 500);
        // window.setTimeout(() => errCb('Problem loading projects'), 1000);
      }}
      onSelect={onSelect}
      placeholder='Search Companies'
      itemSearch={(term, item) => item.name.toLowerCase().includes(term.toLowerCase())}
    >
      {
        (data, onDrilldown) => (
          <span>
            {data.name}
            <span onClick={onDrilldown}> | Projects</span>
          </span>
        )
      }
    </Nav.Tier>
    <Nav.Tier
      id='id'
      label='label'
      placeholder='Search Projects'
      onHrefPrint={(data) => data.label} // second tier uses hrefs
      onDrilldown={(option, cb) => cb(counts)}
      itemSearch={(term, item) => item.label.toLowerCase().includes(term.toLowerCase())}
    >
      {
        (data, onDrilldown) => (
          <span>
            {data.id} - {data.label}
            <span onClick={onDrilldown}> | Next</span>
          </span>
        )
      }
    </Nav.Tier>
    <Nav.Tier
      clippedResultsMessage={(limit) => `List exceeds ${limit} items. Please narrow results by searching.`}
      id='name'
      label='name'
      onSelect={onSelect}
      itemSearch={(term, item) => String(item.name).includes(term)}
    >
      {
        ({ name }) => (<span>{name}</span>)
      }
    </Nav.Tier>
  </Nav.Tiers>
);

export default BasicExample;