import { useLocation } from 'react-router-dom';
import ButtonGroup from '../../shared/buttons/button-group';
import NavLink from '../../shared/buttons/nav-link';

function PeriorityTab() {
  const location = useLocation();
  const urlSearchParams = new URLSearchParams(location.search);
  const currentPriority = urlSearchParams.get('priority');

  function getLinkColor(priority) {
    return currentPriority === priority ? 'rose' : 'gray';
  }

  function getNextURL(priority) {
    if (priority) {
      urlSearchParams.set('priority', priority);
    } else {
      urlSearchParams.delete('priority');
    }
    let url = '/decks';
    const urlSearchParamsSTR = urlSearchParams.toString();
    if (urlSearchParamsSTR) url += `?${urlSearchParamsSTR}`;
    return url;
  }

  return (
    <ButtonGroup className='mx-auto my-3 w-min'>
      <NavLink to={getNextURL('high')} size='xl' color={getLinkColor('high')}>
        ضروری
      </NavLink>
      <NavLink to={getNextURL(null)} size='xl' color={getLinkColor(null)}>
        همه
      </NavLink>
    </ButtonGroup>
  );
}

export default PeriorityTab;
