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 StartOnNthTier = (props = {}) => (
  <Nav.Tiers
    initialData={counts}
    initialDisplay={['Sports R Us', 3]}
    initialPath={[3, 3]}
    root='All Companies'
    triggerZone='Sports R Us #3'
  >
    <Nav.Tier
      id='id'
      label='name'
      onGet={(id, cb, cbErr) => {
        window.setTimeout(() => cb(companies), 500);
        // window.setTimeout(() => cbErr('Something went wrong...'), 500);
      }}
      onDrilldown={(option, cb, cbErr) => {
        // replicate request wait
        window.setTimeout(() => cb(projectsByCompany[option.id]), 500);
      }}
      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'
      onSelect={onSelect}
      onGet={(id, cb) => {
        cb(projectsByCompany[id]);
      }}
      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
      id='name'
      label='name'
      onSelect={onSelect}
      itemSearch={(term, item) => String(item.name).includes(term)}
    >
      {
        ({ name }) => (<span>{name}</span>)
      }
    </Nav.Tier>
  </Nav.Tiers>
);

export default StartOnNthTier;