{"ast":null,"code":"var __jsx = React.createElement;\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ellipsis, math, rem } from '~/utils/style';\nimport SearchInput from '~/components/SearchInput';\nimport Tag from '~/components/Tag';\nimport groupBy from 'lodash/groupBy';\nimport sortBy from 'lodash/sortBy';\nimport styled from 'styled-components';\nimport { useTranslation } from '~/utils/i18n';\nconst margin = rem(16);\nconst Wrapper = styled.div.withConfig({\n  displayName: \"TagFilter__Wrapper\",\n  componentId: \"eb8d6o-0\"\n})([\"display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;\"]);\nconst Search = styled(SearchInput).withConfig({\n  displayName: \"TagFilter__Search\",\n  componentId: \"eb8d6o-1\"\n})([\"width:\", \";margin:0 \", \" \", \" 0;\"], rem(280), math(`${rem(5)} + ${margin}`), margin);\nconst SearchTag = styled(Tag).withConfig({\n  displayName: \"TagFilter__SearchTag\",\n  componentId: \"eb8d6o-2\"\n})([\"margin:0 \", \" \", \" 0;vertical-align:middle;\"], margin, margin);\nconst SearchTagLabel = styled.span.withConfig({\n  displayName: \"TagFilter__SearchTagLabel\",\n  componentId: \"eb8d6o-3\"\n})([\"\", \" vertical-align:middle;\"], ellipsis(rem(120)));\n\nconst TagFilter = ({\n  value,\n  tags: propTags,\n  onChange\n}) => {\n  var _propTags$length, _propTags$length3;\n\n  const {\n    t\n  } = useTranslation('common');\n  const tagGroups = useMemo(() => sortBy(Object.entries(groupBy(propTags || [], tag => tag.label.split('/')[0])).map(([label, tags]) => ({\n    label,\n    tags\n  })), tag => tag.label), [propTags]);\n  const {\n    0: matchedCount,\n    1: setMatchedCount\n  } = useState((_propTags$length = propTags === null || propTags === void 0 ? void 0 : propTags.length) !== null && _propTags$length !== void 0 ? _propTags$length : 0);\n  useEffect(() => {\n    var _propTags$length2;\n\n    return setMatchedCount((_propTags$length2 = propTags === null || propTags === void 0 ? void 0 : propTags.length) !== null && _propTags$length2 !== void 0 ? _propTags$length2 : 0);\n  }, [propTags, setMatchedCount]);\n  const {\n    0: inputValue,\n    1: setInputValue\n  } = useState(value || '');\n  useEffect(() => setInputValue(value || ''), [value, setInputValue]);\n  const {\n    0: selectedValue,\n    1: setSelectedValue\n  } = useState('');\n  const hasSelectedValue = useMemo(() => selectedValue !== '', [selectedValue]);\n  const allText = useMemo(() => inputValue || t('all'), [inputValue, t]);\n  const onInputChange = useCallback(value => {\n    setInputValue(value);\n    setSelectedValue('');\n\n    try {\n      var _propTags$filter;\n\n      const pattern = new RegExp(value);\n      const matchedTags = (_propTags$filter = propTags === null || propTags === void 0 ? void 0 : propTags.filter(tag => pattern.test(tag.label))) !== null && _propTags$filter !== void 0 ? _propTags$filter : [];\n      setMatchedCount(matchedTags.length);\n      onChange === null || onChange === void 0 ? void 0 : onChange(matchedTags);\n    } catch {\n      setMatchedCount(0);\n    }\n  }, [propTags, onChange]);\n  const onClickTag = useCallback(({\n    label,\n    tags\n  }) => {\n    setSelectedValue(label);\n    onChange === null || onChange === void 0 ? void 0 : onChange(tags);\n  }, [onChange]);\n  const onClickAllTag = useCallback(() => {\n    setSelectedValue('');\n    onInputChange(inputValue);\n  }, [inputValue, onInputChange]);\n  return __jsx(Wrapper, null, __jsx(Search, {\n    placeholder: t('searchTagPlaceholder'),\n    rounded: true,\n    onChange: onInputChange\n  }), __jsx(SearchTag, {\n    active: !hasSelectedValue,\n    onClick: onClickAllTag,\n    title: allText\n  }, __jsx(SearchTagLabel, null, allText), \" (\", inputValue ? matchedCount : (_propTags$length3 = propTags === null || propTags === void 0 ? void 0 : propTags.length) !== null && _propTags$length3 !== void 0 ? _propTags$length3 : 0, \")\"), tagGroups.map(group => __jsx(SearchTag, {\n    active: hasSelectedValue && group.label === selectedValue,\n    onClick: () => onClickTag(group),\n    key: group.label,\n    title: group.label\n  }, __jsx(SearchTagLabel, null, group.label), \" (\", group.tags.length, \")\")));\n};\n\nTagFilter.defaultProps = {\n  tags: []\n};\nexport default TagFilter;","map":null,"metadata":{},"sourceType":"module"}