text: import React, { useState } from "react";
  import {
    Input,
    Card,
    Container,
    Checkbox,
    Grid,
    Label,
    List,
    Icon,
    Item,
    Button,
    Segment,
  } from "semantic-ui-react";
  import _truncate from "lodash/truncate";
  import { createSearchAppInit } from "@js/invenio_search_ui";
  import {
    SearchAppFacets,
    SearchAppResultsPane,
  } from "@js/invenio_search_ui/components";
  import {
    BucketAggregation,
    SearchBar,
    Count,
    Sort,
    ResultsList,
    Pagination,
    ResultsPerPage,
  } from "react-searchkit";
  
  const facetsValues = {
    type: {
      organization: "Organization",
      event: "Event",
      topic: "Topic",
      project: "Project",
    },
  };
  
  function ResultsGridItemTemplate({ result, index }) {
    return (
      <Card fluid key={index} href={`/communities/${result.metadata.id}`}>
        <Card.Content>
          <Card.Header>{result.metadata.title}</Card.Header>
          <Card.Description>
            <div
              dangerouslySetInnerHTML={{ __html: result.metadata.description }}
            />
          </Card.Description>
        </Card.Content>
      </Card>
    );
  }
  
  function ResultsItemTemplate({ result, index }) {
    return (
      <Item key={index}>
        <Item.Content>
          <Button
            compact
            size="small"
            floated="right"
            href={`/communities/${result.id}`}
          >
            <Icon name="eye" />
            View
          </Button>
          <Item.Header href={`/communities/${result.id}`}>
            {result.metadata.title}
          </Item.Header>
          <Item.Description>
            <div
              dangerouslySetInnerHTML={{ __html: result.metadata.description }}
            />
          </Item.Description>
        </Item.Content>
      </Item>
    );
  }
  
  export const CommunitiesResults = ({
    sortOptions,
    paginationOptions,
    currentResultsState,
  }) => {
    const { total } = currentResultsState.data;
    return (
      total && (
        <Grid>
          <Grid.Row>
            <Grid.Column width={16}>
              <Segment>
                <Grid>
                  <Grid.Row
                    verticalAlign="middle"
                    className="small padding-tb-5 deposit-result-header"
                  >
                    <Grid.Column width={4}>
                      <Count label={() => <>{total} result(s) found</>} />
                    </Grid.Column>
                    <Grid.Column
                      width={12}
                      textAlign="right"
                      className="padding-r-5"
                    >
                      {sortOptions && (
                        <Sort
                          values={sortOptions}
                          label={(cmp) => <>Sort by {cmp}</>}
                        />
                      )}
                    </Grid.Column>
                  </Grid.Row>
                  <Grid.Row>
                    <Grid.Column>
                      <ResultsList />
                    </Grid.Column>
                  </Grid.Row>
                </Grid>
              </Segment>
            </Grid.Column>
          </Grid.Row>
          <Grid.Row verticalAlign="middle">
            <Grid.Column width={4}></Grid.Column>
            <Grid.Column width={8} textAlign="center">
              <Pagination
                options={{
                  size: "mini",
                  showFirst: false,
                  showLast: false,
                }}
              />
            </Grid.Column>
            <Grid.Column textAlign="right" width={4}>
              <ResultsPerPage
                values={paginationOptions.resultsPerPage}
                label={(cmp) => <> {cmp} results per page</>}
              />
            </Grid.Column>
          </Grid.Row>
        </Grid>
      )
    );
  };
  
  export const CommunitiesSearchBarElement = ({
    placeholder: passedPlaceholder,
    queryString,
    onInputChange,
    executeSearch,
  }) => {
    const placeholder = passedPlaceholder || "Search";
    const onBtnSearchClick = () => {
      executeSearch();
    };
    const onKeyPress = (event) => {
      if (event.key === "Enter") {
        executeSearch();
      }
    };
    return (
      <Input
        action={{
          icon: "search",
          onClick: onBtnSearchClick,
          className: "search",
        }}
        fluid
        placeholder={placeholder}
        onChange={(event, { value }) => {
          onInputChange(value);
        }}
        value={queryString}
        onKeyPress={onKeyPress}
      />
    );
  };
  
  const CommunitiesFacets = ({ aggs, currentResultsState }) => {
    return (
      <>
        {aggs.map((agg) => {
          return (
            <div className="ui accordion" key={agg.title}>
              <BucketAggregation title={agg.title} agg={agg} />
            </div>
          );
        })}
      </>
    );
  };
  
  const CommunitiesFacetsValues = ({
    bucket,
    isSelected,
    onFilterClicked,
    getChildAggCmps,
  }) => {
    const childAggCmps = getChildAggCmps(bucket);
    const [isActive, setisActive] = useState(false);
    const hasChildren = childAggCmps && childAggCmps.props.buckets.length > 0;
    const keyField = bucket.key_as_string ? bucket.key_as_string : bucket.key;
    return (
      <List.Item key={bucket.key}>
        <div
          className={`facet-wrapper title ${
            hasChildren ? "" : "facet-subtitle"
          } ${isActive ? "active" : ""}`}
        >
          <List.Content className="facet-count">
            <Label circular>{bucket.doc_count}</Label>
          </List.Content>
          {hasChildren ? (
            <i
              className={`angle ${isActive ? "down" : "right"} icon`}
              onClick={() => setisActive(!isActive)}
            ></i>
          ) : null}
          <Checkbox
            label={bucket.label || facetsConfig[keyField] || keyField}
            value={keyField}
            onClick={() => onFilterClicked(keyField)}
            checked={isSelected}
          />
        </div>
        <div className={`content facet-content ${isActive ? "active" : ""}`}>
          {childAggCmps}
        </div>
      </List.Item>
    );
  };
  
  const RDMBucketAggregationElement = ({ title, containerCmp }) => {
    return (
      <Card className="borderless-facet">
        <Card.Content>
          <Card.Header>{title}</Card.Header>
        </Card.Content>
        <Card.Content>{containerCmp}</Card.Content>
      </Card>
    );
  };
  export const CommunitiesSearchLayout = (props) => (
    <Container>
      <Grid>
        <Grid.Row columns={3}>
          <Grid.Column width={4} />
          <Grid.Column width={8}>
            <SearchBar placeholder="Search communities..." />
          </Grid.Column>
          <Grid.Column width={4}>
            <Button
              color="green"
              icon="upload"
              href="/communities/new"
              content="New community"
              floated="right"
            />
          </Grid.Column>
        </Grid.Row>
        <Grid.Row>
          <Grid.Column width={4}>
            <SearchAppFacets aggs={props.config.aggs} />
          </Grid.Column>
          <Grid.Column width={12}>
            <SearchAppResultsPane layoutOptions={props.config.layoutOptions} />
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </Container>
  );
  
  const defaultComponents = {
    "BucketAggregation.element": RDMBucketAggregationElement,
    "BucketAggregationValues.element": CommunitiesFacetsValues,
    "SearchApp.facets": CommunitiesFacets,
    "ResultsList.item": ResultsItemTemplate,
    "ResultsGrid.item": ResultsGridItemTemplate,
    "SearchApp.layout": CommunitiesSearchLayout,
    "SearchBar.element": CommunitiesSearchBarElement,
    "SearchApp.results": CommunitiesResults,
  };
  const domContainer = document.getElementById("communities-search");
  const facetsConfig = JSON.parse(domContainer.dataset.facetsConfig);
  
  // Auto-initialize search app
  const initSearchApp = createSearchAppInit(defaultComponents);
  