import React from "react";
import {useDispatch, useSelector} from "react-redux";

//strings
import strings from "../constants/localization";

//actions

//components
import {Button} from "../../../Talk-ui-kit/src/button";
import Divider from "../../../Talk-ui-kit/src/divider";
import Gap from "../../../Talk-ui-kit/src/gap";
import Container from "../../../Talk-ui-kit/src/container";

//styling
import style from "../../styles/app/AsideThreadsSearchResultLoadMore.scss";
import {chatSearchResultPartial} from "../actions/chatActions";
import {THREADS_LIMIT_PER_REQUEST} from "../constants/historyFetchLimits";

//statics

//functions

export default function ({PartialLoadingFragment}) {

  const dispatch = useDispatch();
  const {fetching} = useSelector(store => store.chatSearchResultPartial);
  const {threadsNextOffset, threadsHasNext, query, params} = useSelector(store => store.chatSearchResult);

  function LoadMore() {
    if (threadsHasNext) {
      dispatch(chatSearchResultPartial(threadsNextOffset, THREADS_LIMIT_PER_REQUEST, query, params));
    }
  }

  return <>
    {threadsHasNext &&
    <Container display="flex" justifyContent="center" alignItems="center">

      <Gap y={10}>

        {fetching ?
          <Gap y={10}>
            <Container relative>
              <PartialLoadingFragment/>
            </Container>
          </Gap> :
          <Button className={style.AsideThreadsSearchResultLoadMore__Button}
                  disabled={fetching}
                  size="sm"
                  onMouseDown={e => e.stopPropagation()}
                  onClick={LoadMore}>{strings.loadMore}</Button>
        }
      </Gap>
    </Container>
    }
    <Divider className={style.AsideThreadsSearchResultLoadMore__Divider} thick={.5} color="gray"/>
  </>
}