import React, { useState } from "react";
import CardRestaurant from "./CardRestaurant";
import SearchPanel from "../Input/SearchPanel";
import { makeStyles } from '@material-ui/core/styles';
import { useSelector, useDispatch } from "react-redux";
import { IconButton } from "@material-ui/core";
import TuneIcon from '@material-ui/icons/Tune';
import Chip from '@material-ui/core/Chip';
import { restaurantTypes } from '../../config.js';
import { setTags, setTypes } from "../../actions";
import { decodeTags, compareArrays } from "../../Services"

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    justifyContent: 'center',
    flexWrap: 'wrap',
    '& > *': {
      margin: theme.spacing(0.5),
    },
  }
}))

export default function SearchResults() {
  var results = useSelector((store) => store.searchResults);
  const filterTags = useSelector((store) => store.data.filters.tags);
  const filterTypes = useSelector((store) => store.data.filters.types);
  const dispatch = useDispatch();
  const [collapsed, setCollapsed] = useState(true);
  const array = Array.from(results);
  const classes = useStyles();
  var count = results.length;
  const filterRestaurants = () => {
    if(filterTags.length > 0 || filterTypes.length > 0){
      return array.filter((restaurant) => {
        return filterTypes.includes(restaurant.type) || compareArrays(filterTags, decodeTags(restaurant.tags))
      })
    } else {
      return array;
    }
  }
  const restaurants = filterRestaurants().map((restaurant) => (
    <CardRestaurant
      key={restaurant._id}
      id={restaurant._id}
      name={restaurant.name}
      city={restaurant.city}
      description={restaurant.description}
      imgUrl={restaurant.imgUrl}
      hours={restaurant.workingHours}
      tags={restaurant.tags}
      type={restaurant.type}
    />
  ));

  const availableTags = [
    "Płatność kartą",
    "Lubimy zwierzaki",
    "Bezglutenowe",
    "Wegańskie",
    "Wegetariańskie",
    "Podajemy alkohol",
    "Dowozimy",
  ];

  const handleTagClick = (tag) => {
    let tags = [...filterTags];
    if(tags.includes(tag)){
      const filtered = tags.filter((filterTag) => {
        return tag !== filterTag;
      })
      dispatch(setTags(filtered))
    } else {
      tags.push(tag)
      dispatch(setTags(tags))
    }
  }

  const handleTypeClick = (type) => {
    let types = [...filterTypes];
    if(types.includes(type)){
      const filtered = types.filter((filterType) => {
        return type !== filterType;
      })
      dispatch(setTypes(filtered))
    } else {
      types.push(type)
      dispatch(setTypes(types))
    }
  }

  const toggleCollapsed = () => {
    if(collapsed){
      document.getElementById("collapsible").style.maxHeight = "400px";
      setCollapsed(false);
    } else {
      document.getElementById("collapsible").style.maxHeight = "0px";
      setCollapsed(true);
    }
  }

  const tags = availableTags.map((tag) => {
    if(filterTags.includes(tag)){
      return ((
        <div key={tag} className="chip"><Chip size="small" color="primary" label={tag} onClick={() => handleTagClick(tag)}/></div>
      ))
    } else {
      return ((
        <div key={tag} className="chip"><Chip size="small" color="default" label={tag} onClick={() => handleTagClick(tag)}/></div>
      ))
    }
  })

  const types = restaurantTypes.map((type) => {
    if(filterTypes.includes(type)){
      return (<div key={type} className="chip"><Chip size="small" color="primary" label={type} onClick={()=> handleTypeClick(type)}/></div>)
    } else {
      return (<div key={type} className="chip"><Chip size="small" color="default" label={type} onClick={()=> handleTypeClick(type)}/></div>)
    }
  })

  return (
    <div className="search-results">
      <div className="search-top">
        <SearchPanel/>
        <div>
          <IconButton onClick={() => toggleCollapsed()}>
            <TuneIcon color="primary"/>
          </IconButton>
        </div>
      </div>
      <div id="collapsible" className="collapsible">
      <h3>Tagi</h3>
        <div className={classes.root}>
          {tags}
        </div>
        <h3>Rodzaje kuchni</h3>
        <div className={classes.root}>
          {types}
        </div>
        <div style={{height: "20px"}}></div>
      </div>
      <div className="search-top-lower">
        <p>Znaleziono: {count}</p>
      </div>
      <div className="search-middle">
        {restaurants}
      </div>
    </div>
  );
}