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

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

  /* Getting the value from url */
  const [experience, setExperience] = useUrlState({
    /* The index to get the value from */
    name: 'experience',
    /* Optional, Return function if the value exists */
    onExists: thisId => parseInt(thisId, 10),
    /*
      Optional, Default value if the value does not exist
    */
    defaultValue: 0
  });
  const [name, setName] = useUrlState({
    name: 'name',
    defaultValue: ''
  });
  const [isEmployee, setIsEmployee] = useUrlState({
    name: 'isEmployee',
    onExists: v => v === 'true',
    defaultValue: false
  });

  useUrlSync(
    {
      /* Values those will be kept synced to url */
      states: {
        name,
        experience,
        isEmployee
      },
      /* How the states will be displayed in url */
      onStatesUpdated: {
        isEmployee: v => (v ? 'true' : 'false')
      },
      /* The states those will be skipped if the return value is 'true' */
      ignore: {
        experience: experience => experience === 0
      }
    },
    /* Updating current url */
    updatedPath => {
      /* In this example, we use 'useLocation' from react-router */
      location.replace(updatedPath);
    }
  );

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

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

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

  return (
    <div>
      <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>
    </div>
  );
};