Untitled

/** @format */

import React, { useEffect, useState } from "react";
import GenericModal from "../modal/GenericModal";
import { Navigate } from "react-router-dom";
import { createNewPost } from "../../redux/_post/postSlice";
import CreateNewPoll from "./CreateNewPoll";
import { ThemeContext } from "../Common/ThemeProvider.js";
import { BiArrowBack, BiTrendingDown } from "react-icons/bi";
import { selectToken, selectUser } from "../../redux/_user/userSelectors.js";
import { useDispatch, useSelector } from "react-redux";
import { useTranslation } from "react-i18next";
import {
  MdHistory,
  MdLocationOn,
  MdOutlineAlternateEmail,
  MdOutlineArrowDropDown,
  MdOutlineTrendingUp,
} from "react-icons/md";
import { AiFillLock, AiOutlineClose, AiOutlineRight } from "react-icons/ai";
import StyledTextarea from "../HomeComponent/StyledTextarea";
import { FaLink, FaPoll } from "react-icons/fa";
import { IoCloseSharp, IoLocation } from "react-icons/io5";
import { GrGallery } from "react-icons/gr";
import { BsCameraVideo, BsEmojiLaughing } from "react-icons/bs";
import { Menu, MenuItem, MenuButton, SubMenu } from "@szhsin/react-menu";
import { ImSpinner2 } from "react-icons/im";
import CommentCard from "../Group.Post.Comment/CommentCard.jsx";
import Compressor from "compressorjs";
import EmojiPicker from "@emoji-mart/react";
import ModalComp from "../modal/ModalComp.jsx";
import UserAvatar from "../../Assets/userAvatar.webp";
import { blockCmntRepostQuotePost } from "../../redux/_blockPost/blockPostSlice.js";
import "../../app.css";

const CreateNewPost = ({
  // handleSubmit,
  // HandleClosePostModal,
  // title,
  // isDisable,
  // postType,
  // isLoading,
  // openPollModal,
  active,
  setActive,
  theme,
  postPrivacy,
  setOpenPostPrivacy,
  setOpenMore,
  selectedLocation,
  status,
  setCheck,
  check,
  setCheckDemonitization,
  checkDemonitization,
  setCName,
  cName,
  setCmpLink,
  cmpLink,
  imagePreview,
  isVideo,
  handleCloseImage,
  content,
  setContent,
  handleSelectMention,
  setOpenCoinList,
  openCoinList,
  setIsSelecting,
  isSelecting,
  textareaRef,
  setOpenUsersList,
  openUsersList,
  openHashtagList,
  setOpenHashtagList,
  selectedUsers,
  selectedCoins,
  selectedHashtags,
  setSelectedUsers,
  setSelectedCoins,
  setSelectedHashtags,
  trend,
  handleSetTread,
}) => {
  const user = useSelector(selectUser);
  console.log("reached here", postPrivacy);
  return (
    <>
      {/* <div className="__modal_body_section"> */}
      <div className="c_p_modal_tab_section">
        <div
          className={
            active === "normal"
              ? "c_p_modal_tabs active_c_p_modal_tab_section"
              : "c_p_modal_tabs"
          }
          onClick={() => setActive("normal")}
        >
          Normal post
        </div>

        <div
          className={
            active === "ai"
              ? "c_p_modal_tabs active_c_p_modal_tab_section"
              : "c_p_modal_tabs"
          }
          onClick={() => setActive("ai")}
        >
          AI
        </div>
      </div>

      <div className="tab_box_section">
        {active === "normal" ? (
          <>
            <div className="__post_user_info_section">
              <img
                src={
                  user.p_i
                    ? `${process.env.REACT_APP_GOOGLE_CLOUD_IMAGE_LINK}${user.p_i}`
                    : UserAvatar
                }
                className="__modal_user_avatar"
              />
              <div className="__post_modal_user_box">
                <span className="__modal_user_name">
                  {user.fn} {user.ln}
                </span>
                <div className="post_modal_inner_button">
                  <div className="post_trend_section">
                    <>
                      <button
                        className={
                          trend === "Bullish"
                            ? "c_post_trend_post_btn active_trend_bullish"
                            : "c_post_trend_post_btn"
                        }
                        onClick={() => handleSetTread("Bullish")}
                      >
                        Bullish
                        <MdOutlineTrendingUp
                          style={{
                            color: trend === "Bullish" ? "#2ed573" : null,
                          }}
                        />
                      </button>
                      <button
                        className={
                          trend !== "Bullish"
                            ? "c_post_trend_post_btn active_trend_bearish"
                            : "c_post_trend_post_btn"
                        }
                        onClick={() => handleSetTread("Bearish")}
                      >
                        Bearish
                        <BiTrendingDown
                          style={{
                            color: trend !== "Bullish" ? "crimson" : null,
                          }}
                        />
                      </button>
                    </>
                  </div>
                </div>
              </div>
            </div>

            <div className="__modal_post_type_btn_container">
              <button
                className={`__modal_privacy_type_button ${theme}`}
                onClick={() => setOpenPostPrivacy(true)}
              >
                {postPrivacy}
                <MdOutlineArrowDropDown size={22} />
              </button>
              <button
                className={`__modal_privacy_type_button ${theme}`}
                onClick={() => setOpenMore(true)}
              >
                Add more
                <MdOutlineArrowDropDown size={22} />
              </button>
            </div>

            <div className="select_credentials_container">
              {selectedLocation && (
                <button className={`credentials_tag ${theme}`}>
                  <MdLocationOn className="post_info_icons" />
                  {selectedLocation}
                </button>
              )}

              {status && (
                <button className={`credentials_tag ${theme}`}>
                  <MdHistory className="post_info_icons" />
                  {status}
                </button>
              )}
            </div>

            <div className="modal_post_textarea_section">
              <StyledTextarea
                content={content}
                setContent={setContent}
                handleSelectMention={handleSelectMention}
                setOpenCoinList={setOpenCoinList}
                openCoinList={openCoinList}
                setIsSelecting={setIsSelecting}
                isSelecting={isSelecting}
                textareaRef={textareaRef}
                setOpenUsersList={setOpenUsersList}
                openUsersList={openUsersList}
                openHashtagList={openHashtagList}
                setOpenHashtagList={setOpenHashtagList}
                selectedUsers={selectedUsers}
                selectedCoins={selectedCoins}
                selectedHashtags={selectedHashtags}
                setSelectedUsers={setSelectedUsers}
                setSelectedCoins={setSelectedCoins}
                setSelectedHashtags={setSelectedHashtags}
              />
            </div>
            <div
              className=""
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
              }}
            >
              <label className="__checkbox_label">
                <span className="checkbox_label_text">Paid promotion</span>
                <input
                  className="switch"
                  type="checkbox"
                  checked={check}
                  onChange={() => setCheck((prev) => !prev)}
                />
                <span className="slider"></span>
              </label>

              <label className="__checkbox_label">
                <span className="checkbox_label_text">Monitization</span>
                <input
                  className="switch"
                  type="checkbox"
                  checked={checkDemonitization}
                  onChange={() => setCheckDemonitization((p) => !p)}
                />
                <span className="slider"></span>
              </label>
            </div>
            <div className="modal_checker_section">
              {check && (
                <div className="__check_area_input">
                  <div className="__modal_check_input_form">
                    <input
                      type="text"
                      className="__check_text_input"
                      placeholder="Enter company name"
                      value={cName}
                      onChange={(e) => setCName(e.target.value)}
                    />
                    <MdOutlineAlternateEmail className="__attheRate_icon" />
                  </div>

                  <div className="__modal_check_input_form">
                    <input
                      type="text"
                      className="__check_text_input"
                      placeholder="Enter company website link"
                      value={cmpLink}
                      onChange={(e) => setCmpLink(e.target.value)}
                    />
                    <FaLink className="__attheRate_icon" />
                  </div>
                </div>
              )}
            </div>

            {imagePreview && (
              <div className="block_post_image_section">
                {isVideo ? (
                  <video
                    controls
                    autoPlay={false}
                    muted
                    className="block_post_prev_image"
                    alt="img_preview"
                  >
                    <source src={imagePreview} />
                  </video>
                ) : (
                  <img
                    src={imagePreview}
                    className="block_post_prev_image"
                    alt="img_preview"
                  />
                )}
                <button
                  className="block_prev_image_back_"
                  onClick={() => handleCloseImage()}
                >
                  <IoCloseSharp />
                </button>
              </div>
            )}
          </>
        ) : (
          <>Post with AI support</>
        )}
      </div>
      {/* </div> */}
    </>
  );
};

export default CreateNewPost;