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 [error, setError] = useState(null);
  const [addingPost, addingPostError] = useActionState(addPost, {
    content: text,
  });
  const [addingProposal, addingProposalError] = useActionState(addPost, {
    content: text,
  });

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

    if (newText !== "") {
      if (newText.length >= 1024) {
        setError("Maximální délka příspěvku je 1024 znaků.");
      } else {
        setError(null);
      }
    }
  };

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

        if (!result.error) {
          setText("");
        }
      }
    } else {
      setError("Před přidáním příspěvku nezapomeňte vyplnit jeho obsah.");
    }
  };

  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={error}
        placeholder="Vyplňte text vašeho příspěvku"
        toolbarCommands={[
          ["header", "bold", "italic", "strikethrough"],
          ["link", "quote"],
          ["unordered-list", "ordered-list"],
        ]}
      />

      <div className="form-field" onChange={(evt) => setType(evt.target.value)}>
        <div className="form-field__wrapper form-field__wrapper--freeform flex-col sm:flex-row">
          <div className="radio form-field__control">
            <label>
              <input type="radio" name="postType" value="post" defaultChecked />
              <span className="text-sm sm:text-base">
                Přidávám <strong>běžný příspěvek</strong>
              </span>
            </label>
          </div>

          <div className="radio form-field__control ml-0 mt-4 sm:mt-0 sm:ml-4">
            <label>
              <input type="radio" name="postType" value="procedure-proposal" />
              <span className="text-sm sm:text-base">
                Přidávám <strong>návrh postupu</strong>
              </span>
            </label>
          </div>
        </div>
      </div>

      {type === "procedure-proposal" && (
        <p className="alert alert--light text-sm">
          <i className="alert__icon ico--info mr-2 text-lg hidden md:block" />
          <span>
            Návrh postupu se v rozpravě zobrazí až poté, co předsedající{" "}
            <strong>posoudí jeho přijatelnost</strong>. Po odeslání proto
            nepanikař, že jej hned nevidíš.
          </span>
        </p>
      )}

      <div className="space-x-4">
        <Button
          onClick={onAdd}
          disabled={error || addingPost || addingProposal}
          loading={addingPost || addingProposal}
          fullwidth
          hoverActive
        >
          {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;