import React from 'react';
import { useLocation } from 'react-router-dom';
import { useSyncUrl, useUrlState } from 'use-url-sync';

const App = () => {
  const location = useLocation();

  /* Retrive value from URL */
  const [experience, setExperience] = useUrlState({
    /* Query string index */
    name: 'experience',
    defaultValue: 0,
    /* Optional, Return function if value from URL defined */
    onExists: thisId => parseInt(thisId, 10)
  });
  const [name, setName] = useUrlState({
    name: 'name',
    defaultValue: ''
  });
  const [isEmployee, setIsEmployee] = useUrlState({
    name: 'isEmployee',
    defaultValue: false,
    onExists: v => v === 'true'
  });

  useUrlSync(
    {
      /* States to be synced to URL */
      states: {
        name,
        experience,
        isEmployee
      },
      /* How the states will be displayed in URL */
      onStatesUpdated: {
        isEmployee: v => (v ? 'true' : 'false')
      },
      /* States to be skipped */
      ignore: {
        experience: experience => experience === 0
      }
    },
    updatedUrl => {
      /* In this example, we use 'useLocation' to update the URL */
      location.replace(updatedUrl);
    }
  );

  const increaseExp = () => setExperience(experience => experience + 1);

  const decreaseExp = () => setExperience(experience => experience - 1);

  const toggleEmployeeStatus = () => {
    setIsEmployee(v => !v);
  };

  return (
    <>
      <div id="experience-togglers">
        <button type="button" id="increase-experience" onClick={increaseExp}>
          + 1
        </button>
        <button type="button" id="decrease-experience" onClick={decreaseExp}>
          - 1
        </button>
      </div>
      <button type="button" id="toggle-status" onClick={toggleEmployeeStatus}>
        Toggle Employee Status
      </button>
      <p id="current-experience">{experience}</p>
      <p id="current-name">{name}</p>
      <p id="current-isEmployee">{isEmployee ? 'true' : 'false'}</p>
    </>
  );
};