import React, { useState, useCallback, memo } from "react";
import { XSvg } from "../../Components/CompSvg";
import { useSelector } from "react-redux";
import styles from "../../pages/Results/results.module.scss";
import classNames from "classnames/bind";

let cx = classNames.bind(styles);

const RemoveSvg = memo(({ WhoActive, text }) => {
  // Theme
  const Theme = useSelector((state) => state.Theme.isDarkTheme);

  return WhoActive === text ? (
    <div className={styles.filter__icon}>
      <XSvg Theme={Theme} />
    </div>
  ) : (
    <div></div>
  );
});

const Filter = ({ ShowFilterDrop, setFilterState, FilterState }) => {
  const [WhoActive, setWhoActive] = useState("");

  // Handle Selection
  const HandleSelection = useCallback(
    (type, filter, active) => {
      if (FilterState !== undefined) {
        const key = Object.keys(FilterState)[0];
        const value = FilterState[Object.keys(FilterState)[0]];

        if (key === type && value === filter) {
          setFilterState({ defaultType: false });
        } else {
          setFilterState({ [type]: filter });
        }
      } else {
        setFilterState({ [type]: filter });
      }

      setWhoActive(() => (WhoActive === active ? "" : active));
    },
    [setFilterState, setWhoActive, WhoActive, FilterState]
  );

  //

  return (
    <div
      className={styles.filter}
      style={{
        maxHeight: ShowFilterDrop ? "450px" : "0px",
      }}
    >
      <div className={styles.filter__container}>
        <div className={styles.filter__text_wrapper}>
          <h4 className={styles.filter__text_header}>TYPE</h4>
          <div className="line"></div>

          <FItem
            onclick={() => {
              HandleSelection("type", "video", "video");
            }}
            title="Remove Video filter"
            label="Video"
            text="video"
            WhoActive={WhoActive}
          />

          <FItem
            onclick={() => {
              HandleSelection("type", "channel", "channel");
            }}
            title="Remove Channel filter"
            label="Channel"
            text="channel"
            WhoActive={WhoActive}
          />

          <FItem
            onclick={() => {
              HandleSelection("type", "playlist", "playlist");
            }}
            title="Remove Playlist filter"
            label="Playlist"
            text="playlist"
            WhoActive={WhoActive}
          />
        </div>
        <div className={styles.filter__text_wrapper}>
          <h4 className={styles.filter__text_header}>DURATION</h4>
          <div className="line"></div>

          <FItem
            onclick={() => {
              HandleSelection("videoDuration", "any", "vda-any");
            }}
            title="Remove Any filter"
            label="Any"
            text="vda-any"
            WhoActive={WhoActive}
          />

          <FItem
            onclick={() => {
              HandleSelection("videoDuration", "short", "s4");
            }}
            title="Remove Short (< 4 minutes) filter"
            label={"Short (< 4 minutes)"}
            text="s4"
            WhoActive={WhoActive}
          />

          <FItem
            onclick={() => {
              HandleSelection("videoDuration", "long", "l-20");
            }}
            title=""
            label={"Long > 20 minutes)"}
            text="l-20"
            WhoActive={WhoActive}
          />
        </div>
        <div className={styles.filter__text_wrapper}>
          <h4 className={styles.filter__text_header}>FEATURES</h4>
          <div className="line"></div>

          <FItem
            onclick={() => {
              HandleSelection("videoDefinition", "any", "vdf-any");
            }}
            title=""
            label="Any"
            text="vdf-any"
            WhoActive={WhoActive}
          />

          <FItem
            onclick={() => {
              HandleSelection("videoDefinition", "high", "high");
            }}
            title=""
            label="High"
            text="high"
            WhoActive={WhoActive}
          />

          <FItem
            onclick={() => {
              HandleSelection("videoDefinition", "standard", "standard");
            }}
            title=""
            label="Standard"
            text="standard"
            WhoActive={WhoActive}
          />

          <FItem
            onclick={() => {
              HandleSelection("videoDimension", "2d", "2d");
            }}
            title=""
            label="2D"
            text="2d"
            WhoActive={WhoActive}
          />

          <FItem
            onclick={() => {
              HandleSelection("videoDimension", "3d", "3d");
            }}
            title=""
            label="3D"
            text="3d"
            WhoActive={WhoActive}
          />
        </div>
        <div className={styles.filter__text_wrapper}>
          <h4 className={styles.filter__text_header}>SORT BY</h4>
          <div className="line"></div>

          <FItem
            onclick={() => {
              HandleSelection("order", "relevance", "relevance");
            }}
            title=""
            label="Relevance"
            text="relevance"
            WhoActive={WhoActive}
          />

          <FItem
            onclick={() => {
              HandleSelection("order", "date", "uploadDate");
            }}
            title=""
            label="Upload date"
            text="uploadDate"
            WhoActive={WhoActive}
          />

          <FItem
            onclick={() => {
              HandleSelection("order", "viewCount", "viewCount");
            }}
            title=""
            label="View count"
            text="viewCount"
            WhoActive={WhoActive}
          />

          <FItem
            onclick={() => {
              HandleSelection("order", "videoCount", "videoCount");
            }}
            title=""
            label="Video count"
            text="videoCount"
            WhoActive={WhoActive}
          />

          <FItem
            onclick={() => {
              HandleSelection("order", "rating", "rating");
            }}
            title=""
            label="Rating"
            text="rating"
            WhoActive={WhoActive}
          />
        </div>
      </div>
    </div>
  );
};

const FItem = ({ onclick, classtext, WhoActive, title, text, label }) => {
  const activeClass = (classtext) => {
    return cx("filter__text_area", {
      active: WhoActive === classtext,
    });
  };

  return (
    <div onClick={onclick} title={title} className={activeClass(text)}>
      <span>{label}</span>
      <RemoveSvg WhoActive={WhoActive} text={text} />
    </div>
  );
};

export default memo(Filter);