import React from "react";
import PropTypes from "prop-types";
import {
  HeaderAltLocation,
  HeaderButton,
  HeaderButtons,
  HeaderContainer,
  HeaderLocation,
  HeaderOptions,
  HeaderSelect,
  IconStyled,
  MySwapsTitle,
  RefreshIcon,
  SelectOption,
} from "./Header.styled";
import { ReactComponent as GridSquare } from "../../../assets/images/svg/offer-grid-square.svg";
import { ReactComponent as GridLine } from "../../../assets/images/svg/offer-grid-line.svg";
import { ReactComponent as Down } from "../../../assets/images/svg/down-arrow.svg";
import selectedTheme from "../../../themes";
import { sortEnum } from "../../../enums/sortEnum";
import { useTranslation } from "react-i18next";
import { Tooltip } from "@mui/material";
import SkeletonHeader from "./SkeletonHeader/SkeletonHeader";
import { useSelector } from "react-redux";
import { selectHeaderString } from "../../../store/selectors/filtersSelectors";

const DownArrow = (props) => (
  <IconStyled {...props}>
    <Down />
  </IconStyled>
);

const Header = (props) => {
  const { t } = useTranslation();
  const sorting = props.sorting;
  const headerString = useSelector(selectHeaderString);
  // Changing header string on refresh or on load

  const handleChangeSelect = (event) => {
    // let chosenOption;
    sorting.changeSorting(event.target.value);
    // for (const sortOption in sortEnum) {
    //   if (sortEnum[sortOption].value === event.target.value) {
    //     chosenOption = sortEnum[sortOption];
    //     sorting.changeSorting(chosenOption);
    //   }
    // }
  };

  return (
    <>
      <SkeletonHeader
        skeleton={props.skeleton}
        animationStage={props.animationStage}
      />
      <HeaderContainer skeleton={props.skeleton}>
        {/* Setting appropriate header title if page is market place or my offers */}
        <Tooltip title={headerString}>
          {!props.myOffers ? (
            headerString === "Sve kategorije" &&
            (sorting.selectedSortOption === sortEnum.INITIAL ||
              sorting.selectedSortOption === sortEnum.NEW) ? (
              <React.Fragment>
                <HeaderLocation initial>{headerString}</HeaderLocation>
                <HeaderAltLocation>{t("header.newOffers")}</HeaderAltLocation>
              </React.Fragment>
            ) : (
              <HeaderLocation>{headerString}</HeaderLocation>
            )
          ) : (
            <MySwapsTitle>
              <RefreshIcon /> {t("header.myOffers")}
            </MySwapsTitle>
          )}
        </Tooltip>
        {/* ^^^^^^ */}

        <HeaderOptions>
          <HeaderButtons>
            {/* Setting display of offer cards to full width */}
            <HeaderButton
              iconColor={
                props.isGrid
                  ? selectedTheme.iconStrokeColor
                  : selectedTheme.primaryPurple
              }
              onClick={() => props.setIsGrid(false)}
            >
              <GridLine />
            </HeaderButton>
            {/* ^^^^^^ */}

            {/* Setting display of offer cards to half width (Grid) */}
            <HeaderButton
              iconColor={
                props.isGrid
                  ? selectedTheme.primaryPurple
                  : selectedTheme.iconStrokeColor
              }
              onClick={() => props.setIsGrid(true)}
            >
              <GridSquare />
            </HeaderButton>
            {/* ^^^^^^ */}
          </HeaderButtons>

          {/* Select option to choose sorting */}
          <HeaderSelect
            value={
              sorting.selectedSortOption?.value
                ? sorting.selectedSortOption
                : "default"
            }
            IconComponent={DownArrow}
            onChange={handleChangeSelect}
          >
            <SelectOption style={{ display: "none" }} value="default">
              Sortiraj po
            </SelectOption>
            {Object.keys(sortEnum).map((property) => {
              if (sortEnum[property].value === 0) return;
              return (
                <SelectOption
                  value={sortEnum[property]}
                  key={sortEnum[property].value}
                >
                  {sortEnum[property].mainText}
                </SelectOption>
              );
            })}
          </HeaderSelect>
          {/* ^^^^^^ */}
        </HeaderOptions>
      </HeaderContainer>
    </>
  );
};

Header.propTypes = {
  children: PropTypes.node,
  setIsGrid: PropTypes.func,
  isGrid: PropTypes.bool,
  filters: PropTypes.any,
  category: PropTypes.string,
  myOffers: PropTypes.bool,
  skeleton: PropTypes.bool,
  animationStage: PropTypes.number,
  sorting: PropTypes.any,
};
Header.defaultProps = {
  isGrid: false,
};

export default Header;
