import 'react-tooltip/dist/react-tooltip.css'
import {
  Button,
  Col,
  Row,
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Collapse,
  Container
} from "reactstrap";
import { Tooltip } from 'react-tooltip'
import { useEffect, useState } from "react";
import styles from "./DiscussionCard.module.scss";
import axios from "axios";
import { useRouter } from 'next/router';
import { getTopicStyleFromTopic } from '../../../lib/getTopicStyle';
import { createPost } from '../../../../lib/requests';

export function DiscussionCard({ user }) {
  const router = useRouter()
  const [forumState, setForumState] = useState({
    post_as: "",
    user: undefined,
    title: "",
    description: "",
  });

  useEffect(() => {
    if (user) {
      setForumState({ ...forumState, post_as: user.first_name + " " + user.last_name, user: user.id })
    }
  }, [user])

  const onSubmit = async () => {
    await createPost({ title: forumState.title, text: forumState.description, topics: [selectedTopic], post_as: forumState.post_as, user: forumState.user })
    router.reload()
  }

  const [selectedTopic, setSelectedTopic] = useState(undefined);
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const toggleDropdown = () => setDropdownOpen((prevState) => !prevState);
  const [divHeight, setDivHeight] = useState(0);
  const handleOnEntered = () => setDivHeight(document.getElementById('myDropdown').offsetHeight);
  const handleOnExited = () => setDivHeight(0);

  return (
    <>
      <Container fluid className="h-100">
        <Row className={`${styles.dropdownRow} m-0 p-0`}>
          <Col>
            <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} direction="down" className={styles.dropdownContainer}>
              <DropdownToggle className={styles.dropdown} caret><div className={`${styles.circle} ${getTopicStyleFromTopic(selectedTopic)}`}></div> {selectedTopic ? selectedTopic : "Choose a Topic"}</DropdownToggle>
              <DropdownMenu id="myDropdown" className={styles.dropdownMenu}>
                <DropdownItem onClick={() => { setSelectedTopic("Pandemic") }}> <div className={`${styles.circle} ${getTopicStyleFromTopic("Pandemic")}`}></div> Pandemic</DropdownItem>
                <DropdownItem onClick={() => { setSelectedTopic("Extreme Weather") }}> <div className={`${styles.circle} ${getTopicStyleFromTopic("Extreme Weather")}`}></div> Extreme Weather</DropdownItem>
                <DropdownItem onClick={() => { setSelectedTopic("Rising Temperatures") }}> <div className={`${styles.circle} ${getTopicStyleFromTopic("Rising Temperatures")}`}></div> Rising Temperatures</DropdownItem>
                <DropdownItem onClick={() => { setSelectedTopic("Sea Level Rise") }}> <div className={`${styles.circle} ${getTopicStyleFromTopic("Sea Level Rise")}`}></div> Sea Level Rise</DropdownItem>
                <DropdownItem onClick={() => { setSelectedTopic("Coastal Ecosystems") }}> <div className={`${styles.circle} ${getTopicStyleFromTopic("Coastal Ecosystems")}`}></div> Coastal Ecosystems</DropdownItem>
                <DropdownItem onClick={() => { setSelectedTopic("Energy Consumption") }}> <div className={`${styles.circle} ${getTopicStyleFromTopic("Energy Consumption")}`}></div> Energy Consumption</DropdownItem>
                <DropdownItem onClick={() => { setSelectedTopic("Sustainable Materials") }}> <div className={`${styles.circle} ${getTopicStyleFromTopic("Sustainable Materials")}`}></div> Sustainable Materials</DropdownItem>
                <DropdownItem onClick={() => { setSelectedTopic("Recycling/Upcycling") }}> <div className={`${styles.circle} ${getTopicStyleFromTopic("Recycling/Upcycling")}`}></div> Recycling/Upcycling</DropdownItem>
                <DropdownItem onClick={() => { setSelectedTopic("Green Technology") }}> <div className={`${styles.circle} ${getTopicStyleFromTopic("Green Technology")}`}></div> Green Technology</DropdownItem>
                <DropdownItem onClick={() => { setSelectedTopic("Citizen Science") }}> <div className={`${styles.circle} ${getTopicStyleFromTopic("Citizen Science")}`}></div> Citizen Science</DropdownItem>
                <DropdownItem onClick={() => { setSelectedTopic("Community Engagement") }}> <div className={`${styles.circle} ${getTopicStyleFromTopic("Community Engagement")}`}></div> Community Engagement</DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Collapse isOpen={dropdownOpen} onEntered={handleOnEntered} onExited={handleOnExited}>
              <div style={{ height: `${divHeight}px`, transition: 'height 0.2s ease-out' }}>
              </div>
            </Collapse>
          </Col>
        </Row>
        <Row className={`${styles.cardRow} m-0 p-0`}>
          <Col className="g-2">
            <div className={styles.card}>
              <Row className={styles.cardTitle}>
                <Col xs={8}>
                  <input type="text" placeholder='Title..' className={`${styles.title}`} onChange={(event) => setForumState({ ...forumState, title: event.target.value })}></input>
                </Col>
                <Col xs={4} >
                  {user == null ?
                    <><input type="text" placeholder='Post as..' className={styles.postAs} onChange={(event) => setForumState({ ...forumState, post_as: event.target.value })}></input></> :
                    <><input type="text" value={`${user.first_name} ${user.last_name}`} className={styles.postAs} readOnly></input></>
                  }
                </Col>
              </Row>
              <div className={styles.cardBody}>
                <textarea className={styles.textarea} placeholder='Your Post..' onChange={(event) => setForumState({ ...forumState, description: event.target.value })}>
                </textarea>
                <Row className="ms-auto">
                  <Col>
                    {(() => {
                      if (forumState.title && forumState.description && forumState.post_as && selectedTopic) {
                        return (
                          <Button className={styles.postButton} onClick={onSubmit}>
                            Post
                          </Button>
                        )
                      } else {
                        return (
                          <>
                            <div id="postButton" className={styles.postButtonDisabled} data-tooltip-id="btntooltip" data-tooltip-content="Post requires a title, text and topic, " onClick={onSubmit}>
                              Post
                            </div>
                            <Tooltip id="btntooltip" place='bottom' />
                          </>
                        )
                      }
                    })()}
                  </Col>
                </Row>
              </div>
            </div>
          </Col>
        </Row>
      </Container>
    </>
  )
};