import { sendToBackground } from "@plasmohq/messaging";
import { useEffect, useState } from "react";
import Form from "~components/ui/form";
import { IconBack } from "~assets/icons";
import styles from "./popup.module.less";
import useForm from "~hooks/useForm";
import { add } from "~components/ui/message/utils";

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

interface FormValue {
  title: string;
  link: string;
  desc: string;
  tips: 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 [count, setCount] = useState(0);
  const { bindInput, setValues, onSubmit } = useForm<FormValue>({
    initialValues: {
      test: 'test',
    },
    onSubmit: (values) => {
      submitForm(values);
    },
  });

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

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

  return (
    <div className={styles.tab}>
      <header className={styles.header}>
        <button className={styles.back} onClick={onBack}>
          <IconBack />
        </button>
        <h2>在看</h2>
      </header>
      <main className={styles.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>
        {count}
        <button onClick={() => setCount(prevCount => prevCount + 1)}>add</button>
      </main>
    </div>
  );
}

export default Read;