import React, { useState } from "react";

import { addPost, addProposal } from "actions/posts";
import Button from "components/Button";
import ErrorMessage from "components/ErrorMessage";
import MarkdownEditor from "components/mde/MarkdownEditor";
import { useActionState } from "hooks";

const AddPostForm = ({ className }) => {
  const [text, setText] = useState("");
  const [type, setType] = useState("post");
  const [noTextError, setNoTextError] = useState(false);
  const [addingPost, addingPostError] = useActionState(addPost, {
    content: text,
  });
  const [addingProposal, addingProposalError] = useActionState(addPost, {
    content: text,
  });

  const onTextInput = (newText) => {
    setText(newText);

    if (newText !== "") {
      setNoTextError(false);
    }
  };

  const onAdd = async (evt) => {
    if (!!text) {
      const result = await (type === "post" ? addPost : addProposal).run({
        content: text,
      });

      if (!result.error) {
        setText("");
      }
    } else {
      setNoTextError(true);
    }
  };

  const setTypePost = (evt) => {
    evt.preventDefault();
    evt.stopPropagation();
    setType("post");
  };
  const setTypeProposal = (evt) => {
    evt.preventDefault();
    evt.stopPropagation();
    setType("procedure-proposal");
  };

  const buttonDropdownActionList = (
    <ul className="dropdown-button__choices bg-white text-black whitespace-no-wrap">
      {type === "post" && (
        <li
          className="dropdown-button__choice hover:bg-grey-125"
          onClick={setTypeProposal}
        >
          <span className="block px-4 py-3">Navrhnout postup</span>
        </li>
      )}
      {type === "procedure-proposal" && (
        <li
          className="dropdown-button__choice hover:bg-grey-125"
          onClick={setTypePost}
        >
          <span className="block px-4 py-3">Přidat příspěvek</span>
        </li>
      )}
    </ul>
  );

  return (
    <div className={className}>
      {addingPostError && (
        <ErrorMessage>
          Při přidávání příspěvku došlo k problému: {addingPostError}.
        </ErrorMessage>
      )}
      {addingProposalError && (
        <ErrorMessage>
          Při přidávání příspěvku došlo k problému: {addingProposalError}.
        </ErrorMessage>
      )}
      <MarkdownEditor
        value={text}
        onChange={onTextInput}
        error={
          noTextError
            ? "Před přidáním příspěvku nezapomeňte vyplnit jeho obsah."
            : null
        }
        placeholder="Vyplňte text vašeho příspěvku"
      />

      <div className="space-x-4">
        <Button
          onClick={onAdd}
          disabled={addingPost || addingProposal}
          loading={addingPost || addingProposal}
          hoverActive
          icon="ico--chevron-down"
          iconWrapperClassName="dropdown-button"
          iconChildren={buttonDropdownActionList}
        >
          {type === "post" && "Přidat příspěvek"}
          {type === "procedure-proposal" && "Navrhnout postup"}
        </Button>

        <span className="text-sm text-grey-200 hidden lg:inline">
          Pro pokročilejší formátování můžete používat{" "}
          <a
            href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
            className="underline"
            target="_blank"
            rel="noreferrer noopener"
          >
            Markdown
          </a>
          .
        </span>
      </div>
    </div>
  );
};

export default AddPostForm;