import { useProp, useState, useEffect, h } from 'atomico';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';

var style = ".icon {\n  width: 50px;\n  height: 50px;\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 4px;\n  line-height: 50px;\n  text-align: center;\n  bottom: 65px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  cursor: pointer;\n  right: 50px;\n}\n\n.icon-up {\n  width: 30px;\n  height: 30px;\n  background-size: contain;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' standalone='no'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1588318166751' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3971' xmlns:xlink='http://www.w3.org/1999/xlink' width='200' height='200' fill='white'%3E%3Cdefs%3E%3Cstyle type='text/css'/%3E%3C/defs%3E%3Cpath d='M997.604 677.888l-431.56-431.56c-0.91-1.023-1.934-2.047-2.844-3.071-28.444-28.445-74.41-28.445-102.855 0L26.396 677.092c-28.444 28.444-28.444 74.41 0 102.855s74.411 28.444 102.856 0l382.293-382.294 383.09 383.09c28.444 28.445 74.41 28.445 102.855 0s28.444-74.41 0.114-102.855z' p-id='3972'/%3E%3C/svg%3E\");\n}\n\n.display-none {\n  display: none;\n}\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-fixed-button/kun-fixed-button.tsx";
// TODO scroll error

const KunFixedButton = () => {
  const [clsName] = useProp("clsName");
  const clintWidth = window.document.body.clientHeight;
  const scrollToTop = () => {
    const lL = window.document.getElementsByClassName(clsName);
    const el = lL[0];
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const [show, setShow] = useState(false);
  const checkPosition = () => {
    const lL = window.document.getElementsByClassName(clsName);
    const el = lL[0];
    const top = el.scrollTop;
    if (top > clintWidth / 3) {
      setShow(true);
    } else {
      setShow(false);
    }
    console.log("top", top);
  };

  useEffect(() => {
    const lL = window.document.getElementsByClassName(clsName);
    const el = lL[0];
    console.log("el", el);
    if (el != null) {
      // window.addEventListener("scroll", checkPosition);
      el.addEventListener("scroll", checkPosition);
      window.addEventListener("scroll", checkPosition);
    }

    return () => {
      // window.removeEventListener("scroll", checkPosition);
      el.removeEventListener("scroll", checkPosition);
      window.addEventListener("scroll", checkPosition);
    };
  }, []);

  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 49}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 50}}, style)
      , h('div', { className: `${show ? "" : "display-none1"}  icon transition-opacity duration-500 ease-in-out hover:bg-orange-400`, onclick: scrollToTop, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 51}}
        , h('div', { className: "icon-up", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 52}} )
      )
    )
  );
};

KunFixedButton.props = {
  clsName: {
    type: String,
  },
  message: {
    type: String,
    value: "kun-fixed-button",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

var kunFixedButton = getComponentOrDefine("kun-fixed-button", KunFixedButton);

export default kunFixedButton;
