import { useEffect, useRef, useState } from "react";
import { sendToBackground } from "@plasmohq/messaging";
import useForm from "~hooks/useForm";
import Tab from "~components/ui/tab";
import Form from "~components/ui/form";
import Article from "~components/ui/article";
import { add } from "~components/ui/message/utils";

import styles from "./read.module.less";

interface FormValue {
  title: string;
  link: string;
  desc: string;
  tips: string;
  author: string;
  image: string;
  sitename: string;
  tags: string;
  raw_content?: string;
}

const getInfo = async () => {
  const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });

  if (tab) {
    return await chrome.tabs.sendMessage(tab.id, { type: 'toolbox:getInfo' });
  }
}

const submitForm = (body: FormValue) => {
  sendToBackground({
    name: "read",
    body: {
      action: "addRead",
      values: body,
    },
  }).then((res) => {
    add({
      content: res.msg,
    });
  }).catch((e) => {
    if (e instanceof Error) {
      add({
        content: e.message,
      });
    }
  });
}

function Read() {
  const formRef = useRef<HTMLFormElement>();
  const [htmlContent, setHtmlContent] = useState("");

  const { bindInput, setValues, onSubmit } = useForm<FormValue>({
    initialValues: {
      tags: "",
    },
  });

  useEffect(() => {
    getInfo().then((res) => {
      if (!res) {
        return;
      }

      setValues(res);
      res.raw_content && setHtmlContent(res.raw_content);
    })
  }, []);

  return (
    <Tab className={styles.read}>
      <Tab.Body>
        <Form ref={formRef} onSubmit={onSubmit((values) => submitForm({ ...values, raw_content: htmlContent }))}>
          <input {...bindInput("title")} required placeholder="标题" />
          <input {...bindInput("link")} required placeholder="链接" />
          <div>
            <label htmlFor="desc">概括</label>
            <textarea {...bindInput("desc")} rows={5} required placeholder="概括"></textarea>
          </div>
          <div>
            <label htmlFor="tips">评论 / 推荐理由</label>
            <textarea {...bindInput("tips")} rows={5} placeholder="推荐理由"></textarea>
          </div>
          <div>
            <label htmlFor="author">作者</label>
            <input {...bindInput("author")} placeholder="作者" />
          </div>
          <div>
            <label htmlFor="image">插图</label>
            <input {...bindInput("image")} placeholder="插图" />
          </div>
          <div>
            <label htmlFor="sitename">站点名称</label>
            <input {...bindInput("sitename")} placeholder="站点名称" />
          </div>
          <div>
            <label htmlFor="tags">标签</label>
            <input {...bindInput("tags")} placeholder="标签" />
          </div>
        </Form>
        <Article className={styles.article} value={htmlContent} onChange={setHtmlContent} />
      </Tab.Body>
      <Tab.Footer>
        <button onClick={() => formRef.current?.requestSubmit()}>提交</button>
      </Tab.Footer>
    </Tab>
  );
}

export default Read;