import React, { useState } from "react";
import { Bubble, Button, Input } from "@tencent/tea-component";

export default function BubbleTriggerExample() {
  const [inputText, setInputText] = useState("");
  const length = parseInt(inputText, 10);

  const inputError = Boolean(inputText) && Number.isNaN(length);

  const content = length
    ? `面积 S = ${length} x ${length} = ${length * length}`
    : "请输入边长，计算正方形面积";

  return (
    <>
      <section>
        <Bubble trigger="click" content="我是被点了之后才出现的内容">
          <Button>点击出现</Button>
        </Bubble>
      </section>
      <section>
        <Bubble
          trigger="focus"
          content={inputError ? "输入有误，请输入整数" : content}
          placement="right"
          error={inputError}
        >
          <Input
            placeholder="聚焦出现"
            value={inputText}
            onChange={value => setInputText(value)}
          />
        </Bubble>
      </section>
    </>
  );
}