import { div, button, h1 } from "@laniakeasupercluster/widgets";
import { reactive } from "./reactive.js";

// 工具函数：生成随机字符串
const generateRandomString = (length) => {
  const chars =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  return Array.from({ length }, () =>
    chars.charAt(Math.floor(Math.random() * chars.length))
  ).join("");
};

// 创建对象数组，限制内容最大长度为 100
const objectArray = Array.from({ length: 10 }, (_, index) => ({
  id: index + 1,
  title: `标题${index + 1}`,
  content: generateRandomString(Math.min(100, 100)), // 控制内容长度，最大不超过 100
}));

// 响应式数据
const data = reactive(objectArray)

document.body.appendChild(
  div.bg("#ffffff").p("1rem").childs([
    new button({
      textContent: "切换内容显示",
      onclick: (event) => {
        const contentItems = event.target.nextElementSibling.children;
        const isHidden = event.target.dataset.isHidden === "true";
        event.target.dataset.isHidden = !isHidden;

        Array.from(contentItems).forEach((item) => {
          // 显示隐藏阴影
          if (!item.dataset.originalBoxShadow) {
            item.dataset.originalBoxShadow = item.style.boxShadow;
          }
          const boxShadow = item.dataset.originalBoxShadow;
          const boxShadowAnimate = [{ boxShadow }, { boxShadow: "none" }];
          const finalBoxShadowAnimation = isHidden ? boxShadowAnimate.reverse() : boxShadowAnimate;
          item.animate(finalBoxShadowAnimation, { duration: 750, easing: "ease", fill: "forwards" })

          // 显示隐藏内容
          const content = item.lastElementChild;
          if (!content.dataset.originalHeight) {
            content.dataset.originalHeight = content.scrollHeight // 存储原始高度
          }
          const height = content.dataset.originalHeight + "px";

          const animation = [
            { transform: "scaleY(1)", opacity: 1, height },
            { transform: "scaleY(0)", opacity: 0, height: 0 },
          ];
          const finalAnimation = isHidden ? animation.reverse() : animation;
          content.animate(finalAnimation, { duration: 750, easing: "ease", fill: "forwards" })
          content.style.height = isHidden ? height : "0"; // 动态设置高度
        });
      },
    }),
    new div({
      style: {
        display: "flex",
        padding: "1rem 0",
        flexDirection: "column",
        wordWrap: "break-word",
      },
    }).childs(
      data.map(item => new div({
        style: {
          backgroundColor: "#ffffff",
          boxShadow: "3px 3px 15px rgba(0, 0, 0, 0.1)",
          borderRadius: ".25rem",
          padding: ".5rem",
          marginBottom: "1rem",
        },
        children: [
          div.text(item.title),
          div.text(item.content).h("4rem"),
        ],
        onclick: function (event) {
          if (this.dataset.lock) return
          this.dataset.lock = true
          const height = `${this.scrollHeight}px`
          const { marginTop, marginBottom, paddingTop, paddingBottom } = this.style
          console.log(marginTop, marginBottom, paddingTop, paddingBottom, height)
          const animation = [
            { transform: "scaleY(1)", opacity: 1, height, marginTop, marginBottom, paddingTop, paddingBottom },
            { transform: "scaleY(0)", opacity: 0, height: 0, marginTop: 0, marginBottom: 0, paddingTop: 0, paddingBottom: 0 },
          ]
          this.animate(animation, { duration: 750, easing: "ease", fill: "forwards" }).onfinish = () => {
            console.log('动画完成，删除元素')
            data.splice(data.indexOf(item), 1)
            //this.remove()
          }
        },
      }))
    ),
  ])
);

document.body.style.margin = 0;
document.body.style.padding = 0;
document.body.style.backgroundColor = "rgba(37, 99, 235, 1)";