import React from "react";
import PropTypes from "prop-types";
import {
  AddOfferButton,
  AuthButtonsDrawerContainer,
  CloseButton,
  CloseIcon,
  DrawerButton,
  DrawerContainer,
  DrawerOption,
  FooterButtons,
  HeaderTitle,
  LoginButton,
  LogoutButton,
  LogoutIcon,
  LogoutText,
  MailIcon,
  MyUsername,
  PackageIcon,
  RegisterButton,
  ToolsContainer,
  UserIcon,
} from "./Drawer.styled";
import { useDispatch, useSelector } from "react-redux";
import { selectUserId } from "../../../store/selectors/loginSelectors";
import selectedTheme from "../../../themes";
import { IconButton } from "../../Buttons/IconButton/IconButton";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { CHAT_PAGE, LOGIN_PAGE, MY_OFFERS_PAGE, REGISTER_PAGE } from "../../../constants/pages";
import { selectProfileName } from "../../../store/selectors/profileSelectors";
import { logoutUser } from "../../../store/actions/login/loginActions";

export const Drawer = (props) => {
  const user = useSelector(selectUserId);
  const { t } = useTranslation();
  const history = useHistory();
  const name = useSelector(selectProfileName);
  const dispatch = useDispatch();

  const goToMyPosts = () => {
    props.toggleDrawer();
    history.push(MY_OFFERS_PAGE);
  };
  const goToMyMessages = () => {
    props.toggleDrawer();
    history.push(CHAT_PAGE);
  };
  const goToMyProfile = () => {
    props.toggleDrawer();
    history.push(`/profile/${user}`)
  };
  const goToRegister = () => {
    props.toggleDrawer();
    history.push(REGISTER_PAGE);
  };
  const goToLogin = () => {
    props.toggleDrawer();
    history.push(LOGIN_PAGE);
  };
  const handleAddOffer = () => {
    props.toggleDrawer();
    props.addOffer();
  }
  const logout = () => {
    props.toggleDrawer();
    dispatch(logoutUser());
  };
  return (
    <DrawerContainer>
      <CloseButton onClick={props.toggleDrawer}>
        <CloseIcon />
      </CloseButton>
      {user ? (
        <React.Fragment>
          <HeaderTitle>{t("header.navMenu")}</HeaderTitle>
          <ToolsContainer mobile>
            <DrawerButton onClick={goToMyPosts}>
              <IconButton sx={{ borderRadius: "4px" }}>
                <PackageIcon />
              </IconButton>
              <DrawerOption>{t("header.myOffers")}</DrawerOption>
            </DrawerButton>
            <DrawerButton onClick={goToMyMessages} >
              <IconButton sx={{ borderRadius: "4px" }}>
                <MailIcon />
              </IconButton>
              <DrawerOption>{t("header.myMessages")}</DrawerOption>
            </DrawerButton>
            <DrawerButton onClick={goToMyProfile} >
              <IconButton sx={{ borderRadius: "4px" }}>
                <UserIcon />
              </IconButton>
              <DrawerOption>{t("header.myProfile")}</DrawerOption>
              <MyUsername>({name})</MyUsername>
            </DrawerButton>
          </ToolsContainer>
          <FooterButtons>
            <AddOfferButton
              type="submit"
              variant="contained"
              buttoncolor={selectedTheme.primaryYellow}
              textcolor="black"
              onClick={handleAddOffer}
            >
              {t("header.addOffer")}
            </AddOfferButton>
            <LogoutButton>
              <IconButton onClick={logout}>
                <LogoutIcon />
              </IconButton>
              <LogoutText>{t("common.logout")}</LogoutText>
            </LogoutButton>
          </FooterButtons>
        </React.Fragment>
      ) : (
        <AuthButtonsDrawerContainer>
          <RegisterButton
            type="submit"
            variant="contained"
            height="36px"
            buttoncolor={selectedTheme.primaryYellow}
            textcolor={selectedTheme.primaryDarkText}
            onClick={goToRegister}
          >
            {t("register.headerTitle")}
          </RegisterButton>
          <LoginButton
            type="submit"
            variant="contained"
            height="36px"
            buttoncolor={selectedTheme.primaryPurple}
            textcolor={selectedTheme.primaryIconBackgroundColor}
            onClick={goToLogin}
          >
            {t("login.headerTitle")}
          </LoginButton>
        </AuthButtonsDrawerContainer>
      )}
    </DrawerContainer>
  );
};

Drawer.propTypes = {
  children: PropTypes.node,
  toggleDrawer: PropTypes.func,
  addOffer: PropTypes.func,
};
