import React from 'react';

import { MapDiscussion, MapDiscussions, MapDiscussionsDetail } from '@customTypes/Map';
import { MapDiscussionCommentContent, MapDiscussionContent } from '@customTypes/Content';
import { time_ago } from '@utils/Time';
import { API } from '@api/Api';
import "@css/Maps.css"
import { Link } from 'react-router-dom';
import useConfirm from '@hooks/UseConfirm';

interface DiscussionsProps {
  token?: string
  data?: MapDiscussions;
  isModerator: boolean;
  mapID: string;
  onRefresh: () => void;
}

const Discussions: React.FC<DiscussionsProps> = ({ token, data, isModerator, mapID, onRefresh }) => {

  const { confirm, ConfirmDialogComponent } = useConfirm();

  const [discussionThread, setDiscussionThread] = React.useState<MapDiscussion | undefined>(undefined);
  const [discussionSearch, setDiscussionSearch] = React.useState<string>("");

  const [createDiscussion, setCreateDiscussion] = React.useState<boolean>(false);
  const [createDiscussionContent, setCreateDiscussionContent] = React.useState<MapDiscussionContent>({
    title: "",
    content: "",
  });
  const [createDiscussionCommentContent, setCreateDiscussionCommentContent] = React.useState<string>("");

  const _open_map_discussion = async (discussion_id: number) => {
    const mapDiscussion = await API.get_map_discussion(mapID, discussion_id);
    setDiscussionThread(mapDiscussion);
  };

  const _create_map_discussion = async () => {
    if (token) {
      await API.post_map_discussion(token, mapID, createDiscussionContent);
      setCreateDiscussion(false);
      onRefresh();
    }
  };

  const _create_map_discussion_comment = async (discussion_id: number) => {
    if (token) {
      await API.post_map_discussion_comment(token, mapID, discussion_id, createDiscussionCommentContent);
      await _open_map_discussion(discussion_id);
    }
  };

  const _delete_map_discussion = async (discussion: MapDiscussionsDetail) => {
    if (await confirm("Delete Map Discussion", `Are you sure you want to remove post: ${discussion.title}?`)) {
      if (token) {
        await API.delete_map_discussion(token, mapID, discussion.id);
        onRefresh();
      }
    }
  };

  return (
    <section id='section7' className='summary3'>
      {ConfirmDialogComponent}
      <div id='discussion-search'>
        <input type="text" value={discussionSearch} placeholder={"Search for posts..."} onChange={(e) => setDiscussionSearch(e.target.value)} />
        <div><button onClick={() => setCreateDiscussion(true)}>New Post</button></div>
      </div>

      { // janky ternary operators here, could divide them to more components?
        createDiscussion ?
          (
            <div id='discussion-create'>
              <span>Create Post</span>
              <button onClick={() => setCreateDiscussion(false)}>X</button>
              <div style={{ gridColumn: "1 / span 2" }}>
                <input id='discussion-create-title' placeholder='Title...' onChange={(e) => setCreateDiscussionContent({
                  ...createDiscussionContent,
                  title: e.target.value,
                })} />
                <input id='discussion-create-content' placeholder='Enter the content...' onChange={(e) => setCreateDiscussionContent({
                  ...createDiscussionContent,
                  content: e.target.value,
                })} />
              </div>
              <div style={{ placeItems: "end", gridColumn: "1 / span 2" }}>
                <button id='discussion-create-button' onClick={() => _create_map_discussion()}>Post</button>
              </div>
            </div>
          )
          :
          discussionThread ?
            (
              <div id='discussion-thread'>
                <div>
                  <span>{discussionThread.discussion.title}</span>
                  <button onClick={() => setDiscussionThread(undefined)}>X</button>
                </div>

                <div>
                  <Link to={`/users/${discussionThread.discussion.creator.steam_id}`}>
                    <img src={discussionThread.discussion.creator.avatar_link} alt="" />
                  </Link>
                  <div>
                    <span>{discussionThread.discussion.creator.user_name}</span>
                    <span>{time_ago(new Date(discussionThread.discussion.created_at.replace("T", " ").replace("Z", "")))}</span>
                    <span>{discussionThread.discussion.content}</span>
                  </div>
                  {discussionThread.discussion.comments ?
                    discussionThread.discussion.comments.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
                      .map(e => (
                        <>
                          <Link to={`/users/${e.user.steam_id}`}>
                            <img src={e.user.avatar_link} alt="" />
                          </Link>
                          <div>
                            <span>{e.user.user_name}</span>
                            <span>{time_ago(new Date(e.date.replace("T", " ").replace("Z", "")))}</span>
                            <span>{e.comment}</span>
                          </div>
                        </>
                      )) : ""
                  }
                </div>
                <div id='discussion-send'>
                  <input type="text" value={createDiscussionCommentContent} placeholder={"Message"}
                    onKeyDown={(e) => e.key === "Enter" && _create_map_discussion_comment(discussionThread.discussion.id)}
                    onChange={(e) => setCreateDiscussionCommentContent(e.target.value)} />
                  <div><button onClick={() => {
                    if (createDiscussionCommentContent !== "") {
                      _create_map_discussion_comment(discussionThread.discussion.id);
                      setCreateDiscussionCommentContent("");
                    }
                  }}>Send</button></div>
                </div>

              </div>
            )
            :
            (
              data ?
                (<>
                  {data.discussions.filter(f => f.title.includes(discussionSearch)).sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
                    .map((e, i) => (
                      <div id='discussion-post'>
                        <button key={e.id} onClick={() => _open_map_discussion(e.id)}>
                          <span>{e.title}</span>
                          {isModerator ?
                            <button onClick={(m) => {
                              m.stopPropagation();
                              _delete_map_discussion(e);
                            }}>Delete Post</button>
                            : <span></span>
                          }
                          <span><b>{e.creator.user_name}:</b> {e.content}</span>
                          <span>Last Updated: {time_ago(new Date(e.updated_at.replace("T", " ").replace("Z", "")))}</span>
                        </button>
                      </div>
                    ))}
                </>)
                :
                (<span style={{ textAlign: "center", display: "block" }}>No Discussions...</span>)
            )
      }
    </section>
  );
};

export default Discussions;