import { useEffect, useState, type FormEvent } from "react";
import Placeholder from "~components/ui/placeholder";
import Form from "~components/ui/form";
import { IconBack } from "~assets/icons";
import styles from "./popup.module.less";
import stylesB from "./bili.module.less";
import useForm from "~hooks/useForm";

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

interface FormValue {
  name: string;
  ename: string;
  project: string;
  made: string;
  sale: string;
  type: number;
  desc: string;
}

const getInfo = async () => {
  let tab: chrome.tabs.Tab;

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

  if (tab && !tab.url.includes("chrome")) {
    const a = await chrome.tabs.sendMessage(tab.id, { type: 'toolbox:getBiliToy' });

    console.log('get toy:', a);

    return a;
  }
}

function Toy({ onBack }: ReadProps) {
  const { bindInput, setValues, onSubmit } = useForm<FormValue>({
    initialValues: {
      type: 3,
    },
    onSubmit: (values) => {
      console.log(values);
    },
  });

  const [imgs, setImgs] = useState([]);
  const [currentImg, setCurrentImg] = useState(0);
  const [failed, setFailed] = useState(false);

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

      const { image, ...othors } = res;

      setValues(othors);
      setImgs(res.images);
      setCurrentImg(0);
    })
  }, []);

  return (
    <div className={styles.tab} style={{ width: 600 }}>
      <header className={styles.header}>
        <button className={styles.back} onClick={onBack}>
          <IconBack />
        </button>
        <h2>添加手办</h2>
      </header>
      <main className={styles.body}>
        <Placeholder className={stylesB.bili} show={failed} value="非 B 站会员购页面">
          <div className={stylesB.image}>
            <img src={imgs[currentImg]} alt="" />
            <div className={stylesB.selector}>
              {imgs.map((item, index) => (
                <img src={item} alt="" onClick={() => setCurrentImg(index)} />
              ))}
            </div>
          </div>
          <Form className={stylesB.form} onSubmit={onSubmit((data) => console.log(data))}>
            <div>
              <label htmlFor="name">中文名</label>
              <input {...bindInput("name")} required placeholder="中文名" />
            </div>
            <div>
              <label htmlFor="ename">英文名</label>
              <input {...bindInput("ename")} required placeholder="英文名" />
            </div>
            <div>
              <label htmlFor="project">作品</label>
              <input {...bindInput("project")} required placeholder="作品" />
            </div>
            <div>
              <label htmlFor="made">制作</label>
              <input {...bindInput("made")} required placeholder="制作" />
            </div>
            <div>
              <label htmlFor="sale">发售日期</label>
              <input {...bindInput("sale")} required placeholder="发售日期" />
            </div>
            <div>
              <label htmlFor="type">状态</label>
              <select {...bindInput("type")}>
                <option value={1}>已到货</option>
                <option value={2}>已预订</option>
                <option value={3}>想要但没钱</option>
              </select>
            </div>
            <div>
              <label htmlFor="desc">描述</label>
              <textarea {...bindInput("desc")} rows={5} required placeholder="描述"></textarea>
            </div>

            <button type="submit">提交</button>
          </Form>
        </Placeholder>
      </main>
    </div>
  );
}

export default Toy;