<commit_before>import { useState, useRef, useMemo } from 'react';
import styled from '@emotion/styled';
import isPropValid from '@emotion/is-prop-valid';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faFilter,
  faAngleRight,
  faPlusCircle,
  faMapMarkerAlt,
} from '@fortawesome/free-solid-svg-icons';
import Link from 'next/link';

import { Media } from '../Media';
import VisuallyHidden from '../VisuallyHidden';
import Box from '../Box';
import Text from '../Text';
import Icon from '../Icon';
import LocationSearch from '../LocationSearch';
import Filters from '../Filters';
import Button from '../Button';
import Drawer from '../Drawer';
import { useMapState } from '../MapState';

interface Props {
  isExpanded?: boolean;
}

const Arrow = styled(
  (props: Props) => <Icon icon={faAngleRight} {...props} />,
  {
    shouldForwardProp: (prop) => {
      return isPropValid(prop) && prop !== 'isExpanded';
    },
  }
)`
  transition: transform 0.2s ease;

  ${(props: { isExpanded: unknown }) =>
    props.isExpanded &&
    `
    transform: rotate(90deg);
  `}
`;

const StyledNavLink = styled(Link)`
  display: flex;
  align-items: center;
`;

const Sidebar = () => {
  const [mapState, setMapState] = useMapState();

  const [isFilterExpanded, setIsFilterExpanded] = useState(false);
  const [isFiltersExpanded, setIsFiltersExpanded] = useState(false);
  const filterToggleRef = useRef(null);

  // Show the filters panel on first pageload if there is a filter set.
  // TODO: Disabled for now until decided how this behaviour should work.
  // useEffect(() => {
  //   if (mapState.appliedFilters) {
  //     const isThereAFilterSet = Object.values(mapState.appliedFilters).some(
  //       (filterState) => filterState
  //     );
  //     console.log(mapState.appliedFilters);

  //     setIsFilterExpanded(isThereAFilterSet);
  //   }
  // }, [mapState.appliedFilters]);

  const filterPanel = useMemo(
    () =>
      (isFilterExpanded || isFiltersExpanded) && (
        <Filters
          appliedFilters={mapState.appliedFilters}
          onChange={(appliedFilters) => {
            setMapState({ ...mapState, appliedFilters: { ...appliedFilters } });
          }}
        />
      ),
    [isFilterExpanded, isFiltersExpanded, mapState, setMapState]
  );

  return (
    <section aria-labelledby="heading-search">
      <Media lessThan="md">
        <VisuallyHidden>
          <h2 id="heading-search">Search</h2>
        </VisuallyHidden>

        <LocationSearch
          onSelectedItemChange={(searchLocation) =>
            setMapState({ searchLocation })
          }
        />

        <Box display="flex" justifyContent="center" mt={3}>
          <Button
            ref={filterToggleRef}
            variant="secondary"
            icon={<FontAwesomeIcon icon={faFilter} />}
            aria-expanded={isFiltersExpanded}
            onClick={() => setIsFiltersExpanded(!isFiltersExpanded)}
          >
            Filter Map
          </Button>
        </Box>

        <Box display="flex" justifyContent="center" mt={3}>
          <Button
            type="button"
            variant="primary"
            onClick={() => mapState?.locationServices?.startLocate()}
            aria-label="Find a toilet near me"
          >
            Find a toilet near me
          </Button>
        </Box>

        <Drawer visible={isFiltersExpanded} animateFrom="left">
          <Box display="flex" justifyContent="space-between" mb={4}>
            <Box display="flex" alignItems="flex-end">
              <FontAwesomeIcon icon={faFilter} fixedWidth size="lg" />
              <Box as="h2" mx={2}>
                <Text lineHeight={1}>
                  <b>Filter</b>
                </Text>
              </Box>
            </Box>

            <Text fontSize={12}>
              <Box
                as="button"
                itemType="button"
                onClick={() =>
                  setMapState({ ...mapState, appliedFilters: undefined })
                }
                border={0}
                borderBottom={2}
                borderStyle="solid"
              >
                Reset Filter
              </Box>
            </Text>
          </Box>

          {filterPanel}

          <Box display="flex" justifyContent="center" mt={4}>
            <Button
              onClick={() => {
                setIsFiltersExpanded(false);

                // return focus to the control that invoked the filter overlay
                filterToggleRef.current.focus();
              }}
              css={{
                width: '100%',
              }}
            >
              Done
            </Button>
          </Box>
        </Drawer>
      </Media>

      <Media greaterThan="sm">
        <Box p={4} borderRadius={35} bg="white" width="100%">
          <h2 id="heading-search">
            <b>Search</b>
          </h2>

          <Box mt={3}>
            <LocationSearch
              onSelectedItemChange={(searchLocation) =>
                setMapState({ searchLocation })
              }
            />
          </Box>

          <Box as="section" my={4} aria-labelledby="heading-filters">
            <h2 id="heading-filters">
              <VisuallyHidden>Filters</VisuallyHidden>
            </h2>

            <Box display="flex" justifyContent="space-between">
              <Box
                as="button"
                type="button"
                display="flex"
                alignItems="center"
                aria-expanded={isFilterExpanded}
                onClick={() => setIsFilterExpanded(!isFilterExpanded)}
              >
                <Icon icon={faFilter} fixedWidth size="lg" />
                <Box mx={2}>
                  <Text lineHeight={1}>
                    <b>Filter</b>
                  </Text>
                </Box>
                <Arrow isExpanded={isFilterExpanded} />
              </Box>

              {isFilterExpanded && (
                <Text fontSize={12}><commit_msg>feat: add count of applied filters<commit_after>import { useState, useRef, useMemo, useEffect } from 'react';
import styled from '@emotion/styled';
import isPropValid from '@emotion/is-prop-valid';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faFilter,
  faAngleRight,
  faPlusCircle,
  faMapMarkerAlt,
} from '@fortawesome/free-solid-svg-icons';
import Link from 'next/link';

import { Media } from '../Media';
import VisuallyHidden from '../VisuallyHidden';
import Box from '../Box';
import Text from '../Text';
import Icon from '../Icon';
import LocationSearch from '../LocationSearch';
import Filters from '../Filters';
import Button from '../Button';
import Drawer from '../Drawer';
import { useMapState } from '../MapState';
import config from '../../config';

interface Props {
  isExpanded?: boolean;
}

const Arrow = styled(
  (props: Props) => <Icon icon={faAngleRight} {...props} />,
  {
    shouldForwardProp: (prop) => {
      return isPropValid(prop) && prop !== 'isExpanded';
    },
  }
)`
  transition: transform 0.2s ease;

  ${(props: { isExpanded: unknown }) =>
    props.isExpanded &&
    `
    transform: rotate(90deg);
  `}
`;

const StyledNavLink = styled(Link)`
  display: flex;
  align-items: center;
`;

const Sidebar = () => {
  const [mapState, setMapState] = useMapState();

  const [isFilterExpanded, setIsFilterExpanded] = useState(false);
  const [isFiltersExpanded, setIsFiltersExpanded] = useState(false);
  const filterToggleRef = useRef(null);

  // Show the filters panel on first pageload if there is a filter set.
  // TODO: Disabled for now until decided how this behaviour should work.
  // useEffect(() => {
  //   if (mapState.appliedFilters) {
  //     const isThereAFilterSet = Object.values(mapState.appliedFilters).some(
  //       (filterState) => filterState
  //     );
  //     console.log(mapState.appliedFilters);

  //     setIsFilterExpanded(isThereAFilterSet);
  //   }
  // }, [mapState.appliedFilters]);

  const filterPanel = useMemo(
    () =>
      (isFilterExpanded || isFiltersExpanded) && (
        <Filters
          appliedFilters={mapState.appliedFilters}
          onChange={(appliedFilters) => {
            setMapState({ ...mapState, appliedFilters: { ...appliedFilters } });
          }}
        />
      ),
    [isFilterExpanded, isFiltersExpanded, mapState, setMapState]
  );

  const [appliedFilterCount, setAppliedFilterCount] = useState(0);

  useEffect(
    function setTheAmountOfAppliedFilters() {
      setAppliedFilterCount(
        config.filters
          .map(({ id }) => mapState.appliedFilters?.[id] === true)
          .reduce((v, c) => +c + v, 0)
      );
    },
    [mapState.appliedFilters]
  );

  const appliedFilterCountRendered = useMemo(() => {
    return appliedFilterCount > 0 && <b>({appliedFilterCount})</b>;
  }, [appliedFilterCount]);

  return (
    <section aria-labelledby="heading-search">
      <Media lessThan="md">
        <VisuallyHidden>
          <h2 id="heading-search">Search</h2>
        </VisuallyHidden>

        <LocationSearch
          onSelectedItemChange={(searchLocation) =>
            setMapState({ searchLocation })
          }
        />

        <Box display="flex" justifyContent="center" mt={3}>
          <Button
            ref={filterToggleRef}
            variant="secondary"
            icon={<FontAwesomeIcon icon={faFilter} />}
            aria-expanded={isFiltersExpanded}
            onClick={() => setIsFiltersExpanded(!isFiltersExpanded)}
          >
            Filter Map
          </Button>
        </Box>

        <Box display="flex" justifyContent="center" mt={3}>
          <Button
            type="button"
            variant="primary"
            onClick={() => mapState?.locationServices?.startLocate()}
            aria-label="Find a toilet near me"
          >
            Find a toilet near me
          </Button>
        </Box>

        <Drawer visible={isFiltersExpanded} animateFrom="left">
          <Box display="flex" justifyContent="space-between" mb={4}>
            <Box display="flex" alignItems="flex-end">
              <FontAwesomeIcon icon={faFilter} fixedWidth size="lg" />
              <Box as="h2" mx={2}>
                <Text lineHeight={1}>
                  <b>Filter</b>
                  {appliedFilterCountRendered}
                </Text>
              </Box>
            </Box>

            <Text fontSize={12}>
              <Box
                as="button"
                itemType="button"
                onClick={() =>
                  setMapState({ ...mapState, appliedFilters: undefined })
                }
                border={0}
                borderBottom={2}
                borderStyle="solid"
              >
                Reset Filter
              </Box>
            </Text>
          </Box>

          {filterPanel}

          <Box display="flex" justifyContent="center" mt={4}>
            <Button
              onClick={() => {
                setIsFiltersExpanded(false);

                // return focus to the control that invoked the filter overlay
                filterToggleRef.current.focus();
              }}
              css={{
                width: '100%',
              }}
            >
              Done
            </Button>
          </Box>
        </Drawer>
      </Media>

      <Media greaterThan="sm">
        <Box p={4} borderRadius={35} bg="white" width="100%">
          <h2 id="heading-search">
            <b>Search</b>
          </h2>

          <Box mt={3}>
            <LocationSearch
              onSelectedItemChange={(searchLocation) =>
                setMapState({ searchLocation })
              }
            />
          </Box>

          <Box as="section" my={4} aria-labelledby="heading-filters">
            <h2 id="heading-filters">
              <VisuallyHidden>
                Filters — {appliedFilterCount} filters are applied.
              </VisuallyHidden>
            </h2>

            <Box display="flex" justifyContent="space-between">
              <Box
                as="button"
                type="button"
                display="flex"
                alignItems="center"
                aria-expanded={isFilterExpanded}
                onClick={() => setIsFilterExpanded(!isFilterExpanded)}
              >
                <Icon icon={faFilter} fixedWidth size="lg" />
                <Box mx={2}>
                  <Text lineHeight={1}>
                    <b>Filter </b>
                    {appliedFilterCountRendered}
                  </Text>
                </Box>
                <Arrow isExpanded={isFilterExpanded} />
              </Box>

              {isFilterExpanded && (
                <Text fontSize={12}>
{'fraction_non_alphanumeric': 0.13465922490370255, 'fraction_numerical': 0.005895762911720777, 'mean_word_length': 1.7991199119911991, 'pattern_counts': {'":': 0, '<': 137, '<?xml version=': 0, '>': 171, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '228737', 'n_tokens_mistral': 3570, 'n_tokens_neox': 3482, 'n_words': 734}