import React, { useState } from "react";
import { Modal, Button, CloseButton } from "react-bootstrap";
import StorageImage from "./StorageImage";
import ProfileLink from "./ProfileLink";
import UploadPhoto from "./UploadPhoto";
import { HiOutlinePhotograph } from "react-icons/hi";
import { AiFillYoutube } from "react-icons/ai";
import "./PostModal.css";
import { handleTextareaChange, addPhoto, delPhoto } from "./helper";
import { useSelector } from "react-redux";
import { upload } from "../backend/backend";

const PostModal = (props) => {
  const { show, onClose, setText, isYoutubeBtnPressed, placeholder } = props;

  const user = useSelector((state) => state.currentUser);
  const userID = useSelector((state) => state.user.id);

  const WELCOME_TEXT = `For adding YouTube video do the following:
     1. copy link of the video from the addresse bar of your browser
     2. press YouTube button again to upload the YouTube video to your post
     3. add your text for the post
     4. push the post button`;
  const INIT_POST = {
    userID: `${userID}`,
    text: "",
    isPhoto: false,
    photoURL: "",
    isYoutube: false,
    youtubeURL: "",
    likes: [],
  };
  const [post, setPost] = useState(INIT_POST);

  function handleChange(e) {
    const value = handleTextareaChange({
      e: e,
      state: post,
      setState: setPost,
    });
    setPostBtnEnabled(value);
  }

  function setPostBtnEnabled(value) {
    if (value === "") setBtnEnabled(false);
    else setBtnEnabled(true);
    setText(value);
  }

  const [isBtnEnabled, setBtnEnabled] = useState(false);
  let variant, disabled;
  if (isBtnEnabled) {
    variant = "primary";
    disabled = false;
  } else {
    variant = "secondary";
    disabled = true;
  }

  const [showUploadPhotoDlg, setShowUploadPhotoDlg] = useState(false);

  function addPhotoToPost(file) {
    addPhoto({
      state: post,
      setState: setPost,
      file: file,
      userID: userID,
    });
    setBtnEnabled(true);
  }

  function deletePhoto() {
    delPhoto({
      state: post,
      setState: setPost,
      user: user,
      userID: userID,
      sideEffect: setPostBtnAsSideEffect,
    });
  }

  function setPostBtnAsSideEffect() {
    if (post.text === "" && !post.isYoutube) setBtnEnabled(false);
  }

  function uploadPost() {
    upload(post).then(() => {
      setPost(INIT_POST);
      setText("");
      onClose();
    });
  }

  function addYoutubeVideo() {
    const url = post.text;
    const URL_PATTERN = "https://www.youtube.com/watch?v=";
    const MOBILE_URL_PATTERN = "https://m.youtube.com/watch?v=";
    if (!url.startsWith(URL_PATTERN) && !url.startsWith(MOBILE_URL_PATTERN))
      return;
    let patternLength;
    if (url.startsWith(URL_PATTERN)) patternLength = URL_PATTERN.length;
    else patternLength = MOBILE_URL_PATTERN.length;
    const videoID = url.slice(patternLength);
    const youtubeURL = `https://www.youtube.com/embed/${videoID}`;
    const newPost = { ...post };
    newPost.isYoutube = true;
    newPost.youtubeURL = youtubeURL;
    newPost.text = "";
    setPost(newPost);
    setText("");
    setBtnEnabled(true);
  }

  function deleteYoutubeVideo() {
    const newPost = { ...post };
    newPost.isYoutube = false;
    newPost.youtubeURL = "";
    setPost(newPost);
    if (post.text === "" && !post.isPhoto) setBtnEnabled(false);
  }

  function getPlaceholder() {
    if (isYoutubeBtnPressed && !post.isYoutube) return WELCOME_TEXT;
    else return placeholder;
  }

  function getRows() {
    if (getPlaceholder() === WELCOME_TEXT && post.text === "") return 7;
    else return 3;
  }

  return (
    <>
      <Modal show={show} onHide={onClose}>
        <Modal.Header closeButton>
          <div className='w-100 d-flex justify-content-center'>
            <Modal.Title>
              <b>Create Post</b>
            </Modal.Title>
          </div>
        </Modal.Header>
        <Modal.Body>
          <ProfileLink user={user} size='45' fullname='true' bold='true' />
          <div className='mt-2 scrolling-container'>
            <textarea
              type='text'
              onChange={handleChange}
              className='w-100 mt-2 textarea'
              placeholder={getPlaceholder()}
              rows={getRows()}
              value={post.text}
            ></textarea>
            {post.isPhoto && (
              <div className='mb-2 img-container'>
                <StorageImage
                  alt=''
                  storagePath={`/${post.photoURL}`}
                  className='w-100 img-to-post'
                />
                <div className='close-btn-container'>
                  <CloseButton onClick={deletePhoto} />
                </div>
              </div>
            )}
            {post.isYoutube && (
              <div className='mb-2 video-container'>
                <iframe
                  src={post.youtubeURL}
                  title='YouTube video player'
                  allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope'
                  allowFullScreen
                ></iframe>
                <div className='close-btn-container'>
                  <CloseButton onClick={deleteYoutubeVideo} />
                </div>
              </div>
            )}
          </div>
          <div className='w-100 my-2 add-to-post'>
            <b>Add to your post</b>
            <Button
              className='ml-2 add-photo-btn'
              variant='light'
              size='sm'
              onClick={addYoutubeVideo}
              disabled={post.isPhoto || post.isYoutube}
            >
              <AiFillYoutube
                size='26px'
                className='text-danger'
                aria-label='YouTube'
              />
            </Button>
            <Button
              className='ml-2 add-photo-btn'
              variant='light'
              size='sm'
              onClick={() => setShowUploadPhotoDlg(true)}
              disabled={post.isPhoto || post.isYoutube}
            >
              <HiOutlinePhotograph
                size='26px'
                className='text-success'
                aria-label='photo'
              />
            </Button>
          </div>
          <Button
            variant={variant}
            className='w-100 mt-3'
            disabled={disabled}
            onClick={uploadPost}
          >
            <b>Post</b>
          </Button>
        </Modal.Body>
      </Modal>
      <UploadPhoto
        show={showUploadPhotoDlg}
        setShow={setShowUploadPhotoDlg}
        updateDatabase={addPhotoToPost}
      />
    </>
  );
};

export default PostModal;
