import React, { useState } from "react";

import Button from "components/Button";
import { Card, CardActions, CardBody, CardHeadline } from "components/cards";
import ErrorMessage from "components/ErrorMessage";
import MarkdownEditor from "components/mde/MarkdownEditor";
import Modal from "components/modals/Modal";

const PostEditModal = ({
  post,
  onCancel,
  onConfirm,
  confirming,
  error,
  ...props
}) => {
  const [text, setText] = useState(post.content);
  const [noTextError, setNoTextError] = useState(false);

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

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

  const confirm = (evt) => {
    if (!!text) {
      onConfirm(text);
    } else {
      setNoTextError(true);
    }
  };

  return (
    <Modal containerClassName="max-w-xl" onRequestClose={onCancel} {...props}>
      <Card>
        <CardBody>
          <div className="flex items-center justify-between mb-4">
            <CardHeadline>Upravit text příspěvku</CardHeadline>
            <button onClick={onCancel}>
              <i className="ico--close"></i>
            </button>
          </div>
          <MarkdownEditor
            value={text}
            onChange={onTextInput}
            error={
              noTextError
                ? "Před upravením příspěvku nezapomeňte vyplnit jeho obsah."
                : null
            }
            placeholder="Vyplňte text příspěvku"
            toolbarCommands={[
              ["header", "bold", "italic", "strikethrough"],
              ["link", "quote", "image"],
              ["unordered-list", "ordered-list"],
            ]}
          />
          {error && (
            <ErrorMessage className="mt-2">
              Při editaci došlo k problému: {error}
            </ErrorMessage>
          )}
        </CardBody>
        <CardActions right className="space-x-1">
          <Button
            hoverActive
            color="blue-300"
            className="text-sm"
            loading={confirming}
            onClick={confirm}
          >
            Uložit
          </Button>
          <Button
            hoverActive
            color="red-600"
            className="text-sm"
            onClick={onCancel}
          >
            Zrušit
          </Button>
        </CardActions>
      </Card>
    </Modal>
  );
};

export default PostEditModal;