import { useState } from "react"
export {}
import { sendToBackground } from "@plasmohq/messaging"
// import styleText from "data-text:antd/dist/antd.css"
import type {
  PlasmoGetStyle
} from "plasmo"
// import "./popup.scss"
import { Button, Rate, Space } from 'antd'

import 'antd/dist/antd.css';

// export const getStyle: PlasmoGetStyle = () => {
//   const style = document.createElement("style")
//   style.textContent = styleText
//   return style
// }


function IndexPopup() {
  const [data, setData] = useState("")
  return (
    <div
      className="home"
      style={{
        display: "flex",
        flexDirection: "column",
        padding: 16
      }}>
         <Button type="primary">Primary Button</Button>
         <Rate allowHalf defaultValue={2.5} />
      <h2 onClick={async()=>{
        console.log('click popu')
        fetch("https://yapice.smallzhiyuns.com/mock/10/test")
        .then((data) => {
          return data.json()
        })
        .then((res) => {
          console.log(`res`, res)
        })
          // const resp = await sendToBackground({
          //   name: "ping",
          //   body: {
          //     id: 123
          //   }
          // })
          // console.log(resp)
        
      }}>
        Welcome to your
        <a href="https://www.plasmo.com"  target="_blank">
          {" "}
          Plasmo1123
        </a>{" "}
        Extension!
      </h2>
      <input onChange={(e) => setData(e.target.value)} value={data} />
      <a href="https://docs.plasmo.com" target="_blank">
        View Docsw我爱你
      </a>
    </div>
  )
}

export default IndexPopup