import React, { useEffect, useMemo, useState } from "react";
import PropTypes from "prop-types";
import {
  CheckButton,
  ItemDetailsCardContainer,
  OfferInfo,
  Info,
  DateButtonsContainer,
  ButtonsContainer,
  PostDate,
  CategoryIcon,
  SubcategoryIcon,
  QuantityIcon,
  EyeIcon,
  EditIconContainer,
  EditIcon,
  RemoveIconContainer,
  RemoveIcon,
  EditDeleteButtons,
} from "./ItemDetailsCard.styled";
import selectedTheme from "../../../themes";
import { useDispatch, useSelector } from "react-redux";
import { selectLatestChats } from "../../../store/selectors/chatSelectors";
import { increaseCounter } from "../../../store/actions/counter/counterActions";
import _ from "lodash";
import { selectUserId } from "../../../store/selectors/loginSelectors";
import { formatDateLocale } from "../../../util/helpers/dateHelpers";
import { startChat } from "../../../util/helpers/chatHelper";
import Information from "./Information/Information";
import { useTranslation } from "react-i18next";
import DeleteOffer from "../OfferCard/DeleteOffer/DeleteOffer";
import CreateOffer from "../CreateOfferCard/CreateOffer";
import OfferDetails from "./OfferDetails/OfferDetails";

const ItemDetailsCard = (props) => {
  const [showModalRemove, setShowModalRemove] = useState(false);
  const [showModalEdit, setShowModalEdit] = useState(false);
  const [isMyProfile, setIsMyProfile] = useState(false);
  const offer = props.offer;
  const chats = useSelector(selectLatestChats);
  const userId = useSelector(selectUserId);
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const idProfile = offer?.offer?.userId;

  const increaseOfferCounter = useMemo(() => {
    return _.once(function (id) {
      dispatch(increaseCounter(id));
    });
  }, []);

  useEffect(() => {
    if (offer?.offer?._id) {
      increaseOfferCounter(offer?.offer?._id);
    }
  }, [offer]);

  useEffect(() => {
    if (userId === idProfile) setIsMyProfile(true);
  }, [userId, idProfile]);

  const date = formatDateLocale(new Date(offer?.offer?._created));

  const startExchange = () => {
    startChat(chats, offer?.offer, userId);
  };

  const closeEditModalHandler = () => {
    setShowModalEdit(false);
  };

  const closeRemoveModalHandler = () => {
    setShowModalRemove(false);
  };

  return (
    <>
      <ItemDetailsCardContainer
        sponsored={props.sponsored.toString()}
        halfwidth={props.halfwidth ? 1 : 0}
        className={props.className}
      >
        <OfferInfo>
          <Info>
            <Information
              icon={<CategoryIcon />}
              value={offer?.offer?.category?.name}
            />
            <Information
              icon={<SubcategoryIcon />}
              value={offer?.offer?.subcategory}
            />
            <Information
              icon={<QuantityIcon />}
              value={offer?.offer?.condition}
            />
            <Information
              icon={<EyeIcon />}
              value={offer?.offer?.views?.count}
            />
          </Info>
          <DateButtonsContainer>
            <PostDate>{date}</PostDate>
            {isMyProfile && (
              <ButtonsContainer>
                <EditDeleteButtons>
                  <EditIconContainer onClick={() => setShowModalEdit(true)}>
                    <EditIcon />
                  </EditIconContainer>
                  <RemoveIconContainer onClick={() => setShowModalRemove(true)}>
                    <RemoveIcon />
                  </RemoveIconContainer>
                </EditDeleteButtons>
              </ButtonsContainer>
            )}
          </DateButtonsContainer>
        </OfferInfo>
        <OfferDetails
          offer={offer}
          showExchangeButton={props.showExchangeButton}
          showPublishButton={props.showPublishButton}
        />

        {!props.halfwidth && props.showExchangeButton && (
          <CheckButton
            variant={props.sponsored ? "contained" : "outlined"}
            buttoncolor={selectedTheme.primaryPurple}
            textcolor={props.sponsored ? "white" : selectedTheme.primaryPurple}
            onClick={startExchange}
          >
            {t("itemDetailsCard.startExchangeButton")}
          </CheckButton>
        )}
      </ItemDetailsCardContainer>
      {showModalRemove && (
        <DeleteOffer
          offer={offer.offer}
          closeModalHandler={closeRemoveModalHandler}
        />
      )}
      {showModalEdit && (
        <CreateOffer
          editOffer
          offer={offer.offer}
          closeCreateOfferModal={closeEditModalHandler}
        />
      )}
    </>
  );
};

ItemDetailsCard.propTypes = {
  halfwidth: PropTypes.bool,
  sponsored: PropTypes.bool,
  offer: PropTypes.any,
  hideViews: PropTypes.bool,
  showExchangeButton: PropTypes.bool,
  showBarterButton: PropTypes.bool,
  showPublishButton: PropTypes.bool,
  className: PropTypes.string,
};
ItemDetailsCard.defaultProps = {
  halfwidth: false,
  sponsored: false,
  showExchangeButton: true,
};

export default ItemDetailsCard;
