text: import { useState, useEffect } from "react";
  import Router, {withRouter} from "next/router";
  import dynamic from "next/dynamic";
  
  import { getCookie, isAuth } from "../../api/auth";
  import { getCategories } from "../../api/category";
  import { getTags } from "../../api/tag";
  import { singleBlog, updateBlog } from "../../api/blog";
  
  const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
  import "../../node_modules/react-quill/dist/quill.snow.css";
  import { QuillModules, QuillFormats } from "../../helpers/quill";
  import { API } from "../../config";
  
  const BlogUpdate = ({ router }) => {
    const [body, setBody] = useState("");
    const [categories, setCategories] = useState([]);
    const [tags, setTags] = useState([]);
    const [checked, setChecked] = useState([]);
    const [checkedTag, setCheckedTag] = useState([]);
    const [values, setValues] = useState({
      title: "",
      error: "",
      success: "",
      formData: "",
      title: "",
      body: "",
      loading: false,
    });
  
    const { error, success, formData, title, loading } = values;
    const token = getCookie("token");
  
    useEffect(() => {
      setValues({ ...values, formData: new FormData() });
      initBlog();
      initCategories();
      initTags();
    }, [router]);
  
    const initBlog = () => {
      if (router.query.slug) {
        singleBlog(router.query.slug).then((data) => {
          if (data.error) {
            console.log(data.error);
          } else {
            setValues({ ...values, title: data.title });
            setBody(data.body);
            setCategoriesArray(data.categories);
            setTagsArray(data.tags);
          }
        });
      }
    };
  
    const setCategoriesArray = (blogCategories) => {
      let ca = [];
      blogCategories.map((c) => {
        ca.push(c._id);
      });
      setChecked(ca);
    };
  
    const setTagsArray = (blogTags) => {
      let ta = [];
      blogTags.map((t) => {
        ta.push(t._id);
      });
      setCheckedTag(ta);
    };
  
    const initCategories = () => {
      getCategories().then((data) => {
        if (data.error) {
          setValues({ ...values, error: data.error });
        } else {
          setCategories(data);
        }
      });
    };
  
    const initTags = () => {
      getTags().then((data) => {
        if (data.error) {
          setValues({ ...values, error: data.error });
        } else {
          setTags(data);
        }
      });
    };
  
    const handleToggle = (c) => () => {
      setValues({ ...values, error: "" });
      const clickedCategory = checked.indexOf(c);
      const all = [...checked];
  
      if (clickedCategory === -1) {
        all.push(c);
      } else {
        all.splice(clickedCategory, 1);
      }
  
      console.log(all);
      setChecked(all);
      formData.set("categories", all);
    };
  
    const handleTagsToggle = (t) => () => {
      setValues({ ...values, error: "" });
      const clickedTag = checkedTag.indexOf(t);
      const all = [...checkedTag];
  
      if (clickedTag === -1) {
        all.push(t);
      } else {
        all.splice(clickedTag, 1);
      }
  
      console.log(all);
      setCheckedTag(all);
      formData.set("tags", all);
    };
  
    const findOutCategory = (c) => {
      const result = checked.indexOf(c);
  
      if (result !== -1) {
        return true;
      } else {
        return false;
      }
    };
  
    const findOutTag = (t) => {
      const result = checkedTag.indexOf(t);
  
      if (result !== -1) {
        return true;
      } else {
        return false;
      }
    };
  
    const showCategories = () => {
      return (
        categories &&
        categories.map((c, i) => (
          <li key={i} className="list-unstyled">
            <input
              onChange={handleToggle(c._id)}
              checked={findOutCategory(c._id)}
              type="checkbox"
              className="mr-2"
            />
            <label className="form-check-label">{c.name}</label>
          </li>
        ))
      );
    };
  
    const showTags = () => {
      return (
        tags &&
        tags.map((t, i) => (
          <li key={i} className="list-unstyled">
            <input
              onChange={handleTagsToggle(t._id)}
              checked={findOutTag(t._id)}
              type="checkbox"
              className="mr-2"
            />
            <label className="form-check-label">{t.name}</label>
          </li>
        ))
      );
    };
  
    const handleChange = (name) => (e) => {
      const value = name === "photo" ? e.target.files[0] : e.target.value;
      formData.set(name, value);
      setValues({ ...values, [name]: value, formData, error: "" });
    };
  
    const handleBody = (e) => {
      setBody(e);
      formData.set("body", e);
    };
  
    const editBlog = (e) => {
      e.preventDefault();
  
      updateBlog(formData, token, router.query.slug).then((data) => {
        if (data.error) {
          setValues({ ...values, error: data.error, loading: false });
        } else {
          setValues({
            ...values,
            loading: false,
            title: "",
            success: `Blog titled "${data.title}" is successfully updated`,
          });
          if (isAuth() && isAuth().role === 1) {
            Router.replace(`/admin`);
          } else if (isAuth() && isAuth().role === 0) {
            Router.replace(`/user`);
          }
        }
      });
    };
  
    const showError = () => (
      <div
        className="alert alert-danger"
        style={{ display: error ? "" : "none" }}
      >
        {error}
      </div>
    );
  
    const showSuccess = () => (
      <div
        className="alert alert-success"
        style={{ display: success ? "" : "none" }}
      >
        {success}
      </div>
    );
  
    const showLoading = () => (
      <div
        className="alert alert-info"
        style={{ display: loading ? "" : "none" }}
      >
        Loading...
      </div>
    );
  
    const updateBlogForm = () => {
      return (
        <form onSubmit={editBlog}>
          <div className="form-group">
            <label className="text-muted">Title</label>
            <input
              type="text"
              className="form-control"
              value={title}
              onChange={handleChange("title")}
            />
          </div>
  
          <div className="form-group">
            <ReactQuill
              modules={QuillModules}
              formats={QuillFormats}
              value={body}
              placeholder="Write something amazing..."
              onChange={handleBody}
            />
          </div>
  
          <div>
            <button type="submit" className="btn btn-primary">
              Update
            </button>
          </div>
        </form>
      );
    };
  
    return (
      <div className="container-fluid pb-5">
        <div className="row">
          <div className="col-md-8">
            {updateBlogForm()}
  
            <div className="pt-3">
              {showSuccess()}
              {showError()}
              {showLoading()}
            </div>
  
            {body && (
              <img
                src={`${API}/blog/photo/${router.query.slug}`}
                alt={title}
                style={{ width: "100%" }}
              />
            )}
          </div>
  
          <div className="col-md-4">
            <div>
              <div className="form-group pb-2">
                <h5>Featured image</h5>
                <hr />
  
                <small className="text-muted">Max size: 1mb</small>
                <br />
  
                <label className="btn btn-outline-info">
                  Upload featured image
                  <input
                    onChange={handleChange("photo")}
                    type="file"
                    accept="image/*"
                    hidden
                  />
                </label>
              </div>
            </div>
  
            <div>
              <h5>Categories</h5>
              <hr />
  
              <ul style={{ maxHeight: "200px", overflowY: "scroll" }}>
                {showCategories()}
              </ul>
            </div>
  
            <div>
              <h5>Tags</h5>
              <hr />
              
              <ul style={{ maxHeight: "200px", overflowY: "scroll" }}>
                {showTags()}
              </ul>
            </div>
          </div>
        </div>
      </div>
    );
  };
  
  export default withRouter(BlogUpdate);
  