import { useContext } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSun, faMoon, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';

import { AppContext, getFilterParams } from './AppContext';
import { TREES } from './constants';


export function Header() {
  const { params } = useContext(AppContext);
  const isOnWarningsView = params.view === 'warnings';

  return (
    <div id='header'>
      <Title/>
      { isOnWarningsView && <BackToGuide/> }
      <div id='header-controls'>
        { !isOnWarningsView && <TreeSwitcher/> }
        <DarkMode/>
        { !isOnWarningsView && <WikidataWarnings/> }
        <GitHub/>
      </div>
    </div>
  );
};


function BackToGuide() {
  const { params, setParams } = useContext(AppContext);

  const onClick = (e) => {
    e.preventDefault();
    const next = { ...params };
    delete next.view;
    setParams(next);
  };

  return (
    <div id='nav'>
      <a href='#' onClick={onClick}>← Back to nsi.guide</a>
    </div>
  );
}


function Title() {
  const context = useContext(AppContext);
  const params = context.params;
  const t = params.t;
  const k = params.k;
  const v = params.v;

  if (params.view === 'warnings') {
    document.title = 'Name Suggestion Index - Wikidata Warnings';
    return (
      <div id='title'>
        <h1>
          <FontAwesomeIcon icon={faTriangleExclamation} className='hi' style={{ color: '#f0b400' }} />
          Wikidata Warnings
        </h1>
      </div>
    );
  }

  // try to pick an icon
  let iconURL;
  if (!context.isLoading() && k && v) {
    let fallbackIcon;
    if (t === 'brands') {
      fallbackIcon = 'https://cdn.jsdelivr.net/npm/@mapbox/maki@6/icons/shop-15.svg';
    } else if (t === 'flags') {
      fallbackIcon = 'https://cdn.jsdelivr.net/npm/@mapbox/maki@6/icons/embassy-15.svg';
    } else if (t === 'operators') {
      fallbackIcon = 'https://cdn.jsdelivr.net/npm/@rapideditor/temaki@5/icons/briefcase.svg';
    } else if (t === 'transit') {
      fallbackIcon = 'https://cdn.jsdelivr.net/npm/@rapideditor/temaki@5/icons/board_transit.svg';
    }

    const kv = `${k}/${v}`;
    iconURL = context.icons[kv];
    if (!iconURL) iconURL = context.icons[k];   // fallback to generic key=* icon
    if (!iconURL) iconURL = fallbackIcon;       // fallback to generic icon

    // exceptions:
    if (kv === 'power/minor_line') {  // iD's power pole icon has a fill
      iconURL = 'https://cdn.jsdelivr.net/npm/@rapideditor/temaki@5/icons/power_pole.svg';
    } else if (kv === 'route/power') {
      iconURL = 'https://cdn.jsdelivr.net/npm/@rapideditor/temaki@5/icons/power_tower.svg';
    }
  }

  const icon = iconURL ? (<img className='icon' src={iconURL} />) : null;

  // pick a title
  let title;
  if (t && k && v) {
    title = `${t}/${k}/${v}`;
    document.title = `Name Suggestion Index - ${title}`;
  } else if (t) {
    title = `${t}/`;
    document.title = `Name Suggestion Index - ${title}`;
  } else {
    title = 'Name Suggestion Index';
    document.title = 'Name Suggestion Index';
  }

  return (
    <div id='title'><h1>{icon}{title}</h1></div>
  );
}


function TreeSwitcher() {
  const { params, setParams } = useContext(AppContext);
  const filters = getFilterParams(params);

  return (
    <select
      id='treeswitcher'
      value={params.t}
      onChange={(e) => setParams({ t: e.target.value, ...filters })}
    >
      {['*', ...Object.keys(TREES)].map(tree => (
        <option key={tree} value={tree}>{tree}</option>
      ))}
    </select>
  );
}


function DarkMode() {
  let currValue = window.localStorage.getItem('nsi-darkmode');

  if (currValue === null) {  // initial, no preference set, use media query to check it
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      currValue = 'true';
      window.localStorage.setItem('nsi-darkmode', currValue);
    }
  }

  setDarkMode(currValue);
  const checkedProp = (currValue === 'true') ? { defaultChecked: 'true' } : {};

  return (
    <div id='darkmode' className='control'>
      <FontAwesomeIcon icon={faSun} size='lg' />
      <label className='switch'>
        <input id='nsi-darkmode' type='checkbox' {...checkedProp} onChange={toggleDarkMode} />
        <span className='slider round'></span>
      </label>
      <FontAwesomeIcon icon={faMoon} size='lg' />
    </div>
  );

  function toggleDarkMode(e) {
    const newValue = (window.localStorage.getItem('nsi-darkmode') === 'true') ? 'false' : 'true';
    window.localStorage.setItem('nsi-darkmode', newValue);
    setDarkMode(newValue);
  }

  function setDarkMode(val) {
    if (val === 'true') {
      document.getElementById('root').classList.add('dark');
    } else {
      document.getElementById('root').classList.remove('dark');
    }
  }
}


function GitHub() {
  return (
    <div id='octocat'>
      <a href='https://github.com/osmlab/name-suggestion-index' target='_blank'>
        <FontAwesomeIcon icon={faGithub} size='2x' />
      </a>
    </div>
  );
}


function WikidataWarnings() {
  const { params, setParams } = useContext(AppContext);

  const onClick = (e) => {
    e.preventDefault();
    setParams({ ...params, view: 'warnings' });
  };

  return (
    <div id='wikiwarnings'>
      <a href='#' onClick={onClick} title='View Wikidata warnings'>
        <FontAwesomeIcon icon={faTriangleExclamation} size='2x' />
      </a>
    </div>
  );
}
