<commit_before>import { intersection } from "lodash"
import { Checkbox, Flex, Toggle } from "@artsy/palette"
import React from "react"
import { useArtworkFilterContext } from "../ArtworkFilterContext"
import { FacetAutosuggest } from "./FacetAutosuggest"
import { OptionText } from "./OptionText"
import { INITIAL_ITEMS_TO_SHOW, ShowMore } from "./ShowMore"

const MaterialsTermOption: React.FC<{
  /** Display value (capitalized) for this term */
  name: string

  /** Database value for this term */
  value: string
}> = ({ name, value }) => {
  const { currentlySelectedFilters, setFilter } = useArtworkFilterContext()

  const toggleMaterialsTermSelection = (selected, value) => {
    let materialsTerms = currentlySelectedFilters().materialsTerms.slice()
    if (selected) {
      materialsTerms.push(value)
    } else {
      materialsTerms = materialsTerms.filter(item => item !== value)
    }
    setFilter("materialsTerms", materialsTerms)
  }

  return (
    <Checkbox
      onSelect={selected => {
        toggleMaterialsTermSelection(selected, value)
      }}
      selected={currentlySelectedFilters().materialsTerms.includes(value)}
      key={value}
    >
      <OptionText>{name}</OptionText>
    </Checkbox>
  )
}

export const MaterialsFilter = () => {
  const { aggregations, currentlySelectedFilters } = useArtworkFilterContext()
  const materialsTerms = aggregations.find(
    agg => agg.slice === "MATERIALS_TERMS"
  )

  if (!(materialsTerms && materialsTerms.counts)) {
    return null
  }

  const hasBelowTheFoldMaterialsFilter =
    intersection(
      currentlySelectedFilters().materialsTerms,
      materialsTerms.counts
        .slice(INITIAL_ITEMS_TO_SHOW)
        .map(({ value }) => value)
    ).length > 0

  return (
    <Toggle label="Materials" expanded>
      <Flex flexDirection="column">
        <FacetAutosuggest
          facetName="materialsTerms"
          placeholder="Enter a material"
          facets={materialsTerms.counts}
        />
        <ShowMore expanded={hasBelowTheFoldMaterialsFilter}>
          {materialsTerms.counts.map(({ name, value }) => {
            return <MaterialsTermOption key={value} name={name} value={value} />
          })}
        </ShowMore>
      </Flex>
    </Toggle>
  )
}<commit_msg>fix: change materials filter title to material<commit_after>import { intersection } from "lodash"
import { Checkbox, Flex, Toggle } from "@artsy/palette"
import React from "react"
import { useArtworkFilterContext } from "../ArtworkFilterContext"
import { FacetAutosuggest } from "./FacetAutosuggest"
import { OptionText } from "./OptionText"
import { INITIAL_ITEMS_TO_SHOW, ShowMore } from "./ShowMore"

const MaterialsTermOption: React.FC<{
  /** Display value (capitalized) for this term */
  name: string

  /** Database value for this term */
  value: string
}> = ({ name, value }) => {
  const { currentlySelectedFilters, setFilter } = useArtworkFilterContext()

  const toggleMaterialsTermSelection = (selected, value) => {
    let materialsTerms = currentlySelectedFilters().materialsTerms.slice()
    if (selected) {
      materialsTerms.push(value)
    } else {
      materialsTerms = materialsTerms.filter(item => item !== value)
    }
    setFilter("materialsTerms", materialsTerms)
  }

  return (
    <Checkbox
      onSelect={selected => {
        toggleMaterialsTermSelection(selected, value)
      }}
      selected={currentlySelectedFilters().materialsTerms.includes(value)}
      key={value}
    >
      <OptionText>{name}</OptionText>
    </Checkbox>
  )
}

export const MaterialsFilter = () => {
  const { aggregations, currentlySelectedFilters } = useArtworkFilterContext()
  const materialsTerms = aggregations.find(
    agg => agg.slice === "MATERIALS_TERMS"
  )

  if (!(materialsTerms && materialsTerms.counts)) {
    return null
  }

  const hasBelowTheFoldMaterialsFilter =
    intersection(
      currentlySelectedFilters().materialsTerms,
      materialsTerms.counts
        .slice(INITIAL_ITEMS_TO_SHOW)
        .map(({ value }) => value)
    ).length > 0

  return (
    <Toggle label="Material" expanded>
      <Flex flexDirection="column">
        <FacetAutosuggest
          facetName="materialsTerms"
          placeholder="Enter a material"
          facets={materialsTerms.counts}
        />
        <ShowMore expanded={hasBelowTheFoldMaterialsFilter}>
          {materialsTerms.counts.map(({ name, value }) => {
            return <MaterialsTermOption key={value} name={name} value={value} />
          })}
        </ShowMore>
      </Flex>
    </Toggle>
  )
}
{'fraction_non_alphanumeric': 0.12116564417177914, 'fraction_numerical': 0.00043821209465381246, 'mean_word_length': 3.31067044381492, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 47, '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': '7250853', 'n_tokens_mistral': 1359, 'n_tokens_neox': 1300, 'n_words': 276}