import { useEffect } 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 { add } from "~components/ui/message/utils";

interface ReadProps {
  onBack: () => void;
}

interface FormValue {
  title: string;
  link: string;
  desc: string;
  tips: string;
  author: string;
  image: string;
  sitename: string;
  tags: 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: "submitAddForm",
      values: body,
    },
  }).then((res) => {
    if (res.status === "Success") {
      add({
        content: "提交成功",
      });
    }
    else {
      add({
        content: res.msg,
      });
    }
  });
}

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

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

      setValues(res);
    })
  }, []);

  return (
    <Tab>
      <Tab.Header title="在看" onBack={onBack} />
      <Tab.Body>
        <Form onSubmit={onSubmit(submitForm)}>
          <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>
          <button type="submit">提交</button>
        </Form>
      </Tab.Body>
    </Tab>
  );
}

export default Read;