Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Add from '@mui/icons-material/Add';
import Remove from '@mui/icons-material/Remove';
import { FormControlLabel, IconButton, Radio, RadioGroup, styled, Typography } from '@mui/material';

import { useSearchQuery } from '@hooks';

import Widget from '@components/UI/Widget';
import UbicationInput from '@components/UI/inputs/UbicationInput';

const FiltersHeader = styled('div')(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  gap: theme.spacing(0.5),
  [theme.breakpoints.up('md')]: {
    '& button': {
      display: 'none'
    }
  }
}));

const CATEGORIES = [
  {
    label: 'Personas',
    value: 'user'
  },
  {
    label: 'Trabajos',
    value: 'job'
  },
  {
    label: 'Empresas',
    value: 'company'
  },
  {
    label: 'Grupos',
    value: 'group'
  }
];

export default function SearchFilters({ allowSearchCompany = false }) {
  const [show, setShow] = useState(true);
  const navigate = useNavigate();

  const { getStringParams, setParam, getParam } = useSearchQuery();

  const handleCategoryChange = (event) => {
    const category = event.target.value;
    navigate(`/search/entity/${category}` + getStringParams());
  };

  const onChangeAddress = (address = {}) => {
    Object.entries(address).forEach(([key, value]) => setParam(key, value));
  };

  const toggleShow = () => setShow(!show);

  return (
    <>
      <FiltersHeader>
        <Typography variant='h2'>Filtros</Typography>

        <IconButton onClick={toggleShow}>{show ? <Remove /> : <Add />}</IconButton>
      </FiltersHeader>

      {show && (
        <>
          <Widget>
            <Widget.Header title='Buscar por' />
            <Widget.Body>
              <RadioGroup name='category' onChange={handleCategoryChange}>
                {CATEGORIES.map(({ label, value }) => {
                  if (['company', 'job'].includes(value) && !allowSearchCompany) {
                    return null;
                  }

                  return (
                    <FormControlLabel key={value} value={value} control={<Radio />} label={label} />
                  );
                })}
              </RadioGroup>
            </Widget.Body>
          </Widget>

          <Widget>
            <Widget.Header title='Ubicación' />

            <Widget.Body>
              <UbicationInput
                settedQuery={getParam('formatted_address')}
                onGetAddress={onChangeAddress}
                placeholder='Buscar un lugar'
              />
            </Widget.Body>
          </Widget>
        </>
      )}
    </>
  );
}