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

function RateTypeTab() {
  const location = useLocation();
  const urlSearchParams = new URLSearchParams(location.search);
  const currentRateType = urlSearchParams.get('rate-type');

  function getLinkColor(rateType) {
    return currentRateType === rateType ? 'blue' : 'gray';
  }

  function getNextURL(rateType) {
    if (rateType) {
      urlSearchParams.set('rate-type', rateType);
    } else {
      urlSearchParams.delete('rate-type');
    }
    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('starred')} size='xl' color={getLinkColor('starred')}>
        ستاره دار
      </NavLink>
      <NavLink to={getNextURL('active')} size='xl' color={getLinkColor('active')}>
        فعال
      </NavLink>
      <NavLink to={getNextURL(null)} size='xl' color={getLinkColor(null)}>
        همه
      </NavLink>
    </ButtonGroup>
  );
}

export default RateTypeTab;
