<commit_before>import { ChevronDown, ChevronUp, MapLayers } from '@datapunt/asc-assets'
import {
  breakpoint,
  Button,
  Card,
  CardContent,
  Heading,
  Icon,
  Link,
  themeColor,
  themeSpacing,
} from '@datapunt/asc-ui'
import React, { useCallback, useState } from 'react'
import styled from 'styled-components'

const CardContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -${themeSpacing(6)};
`

const CardWrapper = styled.div`
  width: 100%;
  margin-bottom: ${themeSpacing(6)};
  @media screen and (${breakpoint('min-width', 'laptopL')}) {
    width: calc(50% - (${themeSpacing(6)} / 2));

    &:nth-of-type(2n) {
      margin-left: ${themeSpacing(6)};
    }
  }
`

const StyledCard = styled(Card)`
  width: 100%;
  border: ${themeColor('tint', 'level3')} 1px solid;
`

const StyledCardContent = styled(CardContent)`
  padding: ${themeSpacing(4)};
  margin-bottom: auto;
`

const CardHeader = styled(Link)`
  display: flex;
  width: 100%;
`

const CardHeadingContainer = styled.div`
  display: flex;
  width: 100%;
  padding: ${themeSpacing(2)};
  margin-bottom: auto;
`

const CardImage = styled.img`
  max-height: ${themeSpacing(18)};
`

const CardHeaderIcon = styled(Icon)`
  margin-right: ${themeSpacing(2)};
  fill: ${themeColor('support', 'valid')};
`

const CardHeaderHeading = styled(Heading)`
  margin: auto 0;
  color: ${themeColor('tint', 'level7')};
`

const List = styled.ul`
  margin: 0;
  list-style: inside;
  font-weight: bold;
`

const IntroText = styled.span`
  display: block;
  margin-bottom: ${themeSpacing(2)};
`

const StyledButton = styled(Button)`
  height: auto;
  padding: 0;
  margin-top: ${themeSpacing(4)};
  margin-bottom: ${({ hasMarginBottom }) => (hasMarginBottom ? themeSpacing(4) : 0)};
  color: ${themeColor('primary', 'main')};
`

const StyledIcon = styled(Icon)`
  margin-left: ${themeSpacing(1)};
  fill: ${themeColor('primary', 'main')};
`

export interface MapCollectionSearchResultsProps {
  // TODO: Properly type the results
  results: any[]
}

const MAX_ITEMS = 4

const MapCollectionSearchResults: React.FC<MapCollectionSearchResultsProps> = ({ results }) => (
  <CardContainer>
    {results.map((result) => (
      <MapCollectionCard key={result.id} result={result} />
    ))}
  </CardContainer>
)

interface MapCollectionCardProps {
  result: any
}

const MapCollectionCard: React.FC<MapCollectionCardProps> = ({ result }) => {
  const [expanded, setExpanded] = useState(false)
  const visibleLayers = result.mapLayers.slice(0, MAX_ITEMS)
  const hiddenLayers = result.mapLayers.slice(MAX_ITEMS)

  const handleOnClick = useCallback(() => setExpanded((value) => !value), [])

  return (
    <CardWrapper>
      <StyledCard>
        <CardHeader href={result.href}>
          <CardImage src={result.meta.thumbnail} alt="" />
          <CardHeadingContainer>
            <CardHeaderIcon inline size={16}>
              <MapLayers />
            </CardHeaderIcon>
            <CardHeaderHeading as="h4">{result.title}</CardHeaderHeading>
          </CardHeadingContainer>
        </CardHeader>
        <StyledCardContent>
          <IntroText>Deze kaartcollectie bevat de volgende kaartlagen:</IntroText>
          <List>
            {visibleLayers.map((layer) => (
              <li key={layer.id}>{layer.title}</li>
            ))}
          </List>
          {hiddenLayers.length > 0 && (
            <StyledButton variant="blank" onClick={handleOnClick} hasMarginBottom={expanded}>
              Toon meer
              <StyledIcon inline size={14}>
                {expanded ? <ChevronUp /> : <ChevronDown />}
              </StyledIcon>
            </StyledButton>
          )}
          {expanded && (
            <List>
              {hiddenLayers.map((layer) => (<commit_msg>Incorporate feedback for map search<commit_after>import { ChevronDown, ChevronUp, MapLayers } from '@datapunt/asc-assets'
import {
  breakpoint,
  Button,
  Card,
  CardContent,
  Heading,
  Icon,
  Link,
  themeColor,
  themeSpacing,
} from '@datapunt/asc-ui'
import React, { useCallback, useState } from 'react'
import styled from 'styled-components'

const CardContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -${themeSpacing(6)};
`

const CardWrapper = styled.div`
  width: 100%;
  margin-bottom: ${themeSpacing(6)};
  @media screen and (${breakpoint('min-width', 'laptopL')}) {
    width: calc(50% - (${themeSpacing(6)} / 2));

    &:nth-of-type(2n) {
      margin-left: ${themeSpacing(6)};
    }
  }
`

const StyledCard = styled(Card)`
  width: 100%;
  border: ${themeColor('tint', 'level3')} 1px solid;
`

const StyledCardContent = styled(CardContent)`
  padding: ${themeSpacing(4)};
  margin-bottom: auto;
`

const CardHeader = styled(Link)`
  display: flex;
  width: 100%;
`

const CardHeadingContainer = styled.div`
  display: flex;
  width: 100%;
  padding: ${themeSpacing(2)};
  margin-bottom: auto;
`

const CardImage = styled.img`
  max-height: ${themeSpacing(18)};
`

const CardHeaderIcon = styled(Icon)`
  margin-right: ${themeSpacing(2)};
  fill: ${themeColor('support', 'valid')};
`

const CardHeaderHeading = styled(Heading)`
  margin: auto 0;
  color: ${themeColor('tint', 'level7')};
`

const List = styled.ul`
  margin: 0;
  list-style: inside;
  font-weight: bold;
  line-height: ${themeSpacing(7)};
`

const IntroText = styled.span`
  display: block;
  margin-bottom: ${themeSpacing(2)};
`

const StyledButton = styled(Button)`
  height: auto;
  padding: 0;
  margin-top: ${themeSpacing(4)};
  margin-bottom: ${({ hasMarginBottom }) => (hasMarginBottom ? themeSpacing(4) : 0)};
  color: ${themeColor('primary', 'main')};
`

const StyledIcon = styled(Icon)`
  margin-left: ${themeSpacing(1)};
  fill: ${themeColor('primary', 'main')};
`

export interface MapCollectionSearchResultsProps {
  // TODO: Properly type the results
  results: any[]
}

const MAX_ITEMS = 4

const MapCollectionSearchResults: React.FC<MapCollectionSearchResultsProps> = ({ results }) => (
  <CardContainer>
    {results.map((result) => (
      <MapCollectionCard key={result.id} result={result} />
    ))}
  </CardContainer>
)

interface MapCollectionCardProps {
  result: any
}

const MapCollectionCard: React.FC<MapCollectionCardProps> = ({ result }) => {
  const [expanded, setExpanded] = useState(false)
  const visibleLayers = result.mapLayers.slice(0, MAX_ITEMS)
  const hiddenLayers = result.mapLayers.slice(MAX_ITEMS)

  const handleOnClick = useCallback(() => setExpanded((value) => !value), [])

  return (
    <CardWrapper>
      <StyledCard>
        <CardHeader href={result.href}>
          <CardImage src={process.env.CMS_ROOT + result.meta.thumbnail} alt="" />
          <CardHeadingContainer>
            <CardHeaderIcon inline size={16}>
              <MapLayers />
            </CardHeaderIcon>
            <CardHeaderHeading as="h4">{result.title}</CardHeaderHeading>
          </CardHeadingContainer>
        </CardHeader>
        <StyledCardContent>
          <IntroText>Deze kaartcollectie bevat de volgende kaartlagen:</IntroText>
          <List>
            {visibleLayers.map((layer) => (
              <li key={layer.id}>{layer.title}</li>
            ))}
          </List>
          {hiddenLayers.length > 0 && (
            <StyledButton variant="blank" onClick={handleOnClick} hasMarginBottom={expanded}>
              Toon meer
              <StyledIcon inline size={14}>
                {expanded ? <ChevronUp /> : <ChevronDown />}
              </StyledIcon>
            </StyledButton>
          )}
          {expanded && (
            <List>
              {hiddenLayers.map((layer) => (
{'fraction_non_alphanumeric': 0.15195692146046755, 'fraction_numerical': 0.011688993958497505, 'mean_word_length': 3.282902137232846, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 83, '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': '932794', 'n_tokens_mistral': 2613, 'n_tokens_neox': 2525, 'n_words': 507}