import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import styled from "styled-components";

import {
  selectKeyword,
  resetFilters,
  getFiltersAndResults,
  setPage
} from "../../actions/filters";
import Select from "./Select";
import Input from "./Input";
import { Spinner } from "../common";
import { COL_GRAY } from "../../contants/colors";
import usePath from "../../hooks/usePath";
import { Button } from "../tabs/Tabs";
import { allowedTypes } from "../../reducers/rootReducer";
import useWindowWidth from "../../hooks/useWindowWidth";
import usePrevious from "../../hooks/usePrevious";
import CollapseFilters from "./CollapseFilters";

const InputWrapper = styled.div`
  margin-bottom: 14px;
`;

const Label = styled.label`
  text-transform: uppercase;
  color: ${COL_GRAY};
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  display: block;
`;

function Filters({ token }) {
  const dispatch = useDispatch();
  const { data } = useSelector(state => state);
  const path = usePath();
  const width = useWindowWidth();
  const [showFilters, setShowFilters] = useState(width > 768);
  const [isFilterClicked, setIsFilterClicked] = useState(false);
  const [once, setOnce] = useState(false);
  const prevType = usePrevious(data.type);
  const prevKeyword = usePrevious(data.keyword);
  const prevFilters = usePrevious(data.filters);
  const prevPage = usePrevious(data.activePage);

  function handleReset() {
    dispatch(resetFilters());
  }

  useEffect(() => {
    dispatch(setPage(1));
  }, [data.filters, data.keyword, data.type, dispatch]);

  useEffect(() => {
    setOnce(true);
  }, []);

  useEffect(() => {
    function getData() {
      if (path === data.type || path === "" || !allowedTypes.includes(path)) {
        dispatch(
          getFiltersAndResults(
            token,
            data.type,
            data.keyword,
            data.filters,
            data.activePage
          )
        );
      }
    }

    function hasChanged() {
      return (
        prevType !== data.type ||
        prevKeyword !== data.keyword ||
        JSON.stringify(prevFilters) !== JSON.stringify(data.filters) ||
        prevPage !== data.activePage
      );
    }

    if ((width < 768 && isFilterClicked) || !once) {
      getData();
      setIsFilterClicked(false);
    }

    if (width > 768 && hasChanged()) {
      getData();
    }
  }, [
    token,
    data.type,
    path,
    data.keyword,
    data.filters,
    dispatch,
    data.activePage,
    isFilterClicked,
    once,
    width,
    prevFilters,
    prevKeyword,
    prevPage,
    prevType
  ]);

  if (data.isLoading) {
    return <Spinner />;
  }

  return (
    <div>
      {width < 768 && (
        <CollapseFilters onClick={() => setShowFilters(!showFilters)} />
      )}
      {(showFilters || width > 768) && (
        <>
          <InputWrapper>
            <Label htmlFor="keyword">Search for keyword</Label>
            <Input action={selectKeyword} id="keyword" />
          </InputWrapper>
          {data.filtersToFill &&
            Object.keys(data.filtersToFill).map(key => (
              <InputWrapper key={key}>
                {key === "language" && (
                  <Label htmlFor="language">Language</Label>
                )}
                <Select
                  id="language"
                  placeholder={data.filtersToFill[key].placeholder || key}
                  selected={{
                    label: data.filters[data.filtersToFill[key].parent],
                    value: data.filters[data.filtersToFill[key].parent]
                  }}
                  data={data.filtersToFill[key]}
                />
              </InputWrapper>
            ))}
          <InputWrapper>
            <Button style={{ width: "100%" }} onClick={handleReset}>
              Reset filters
            </Button>
          </InputWrapper>
          {width < 768 && (
            <InputWrapper>
              <Button
                style={{ width: "100%" }}
                onClick={() => setIsFilterClicked(true)}
              >
                Filter
              </Button>
            </InputWrapper>
          )}
        </>
      )}
    </div>
  );
}

export default Filters;