import { spread, insert, createComponent, effect, className, style, template } from 'solid-js/web';
import { createMemo } from 'solid-js';
import copy from 'copy-to-clipboard';
import { DefaultIcon, Icon } from '@cn-ui/core';
import { OriginComponent, useEventController, atom, extendsEvent } from '@cn-ui/use';

/** 模拟异步操作 */
const sleep = (ms, data = null, rej = false) => {
  return new Promise((resolve, reject) => {
    console.log('执行休眠');
    setTimeout(() => {
      if (rej) {
        reject(data);
      } else {
        resolve(data);
      }

      console.log('休眠结束');
    }, ms);
  });
};

const _tmpl$$1 = /*#__PURE__*/template(`<span><span></span></span>`, 4),
      _tmpl$2 = /*#__PURE__*/template(`<span></span>`, 2);
const CopyText = OriginComponent(props => {
  let container;
  const control = useEventController({});
  const iconName = atom('content_copy');
  return (() => {
    const _el$ = _tmpl$$1.cloneNode(true),
          _el$2 = _el$.firstChild;

    const _ref$ = props.ref;
    typeof _ref$ === "function" ? _ref$(_el$) : props.ref = _el$;

    spread(_el$, () => extendsEvent(props), false, true);

    const _ref$2 = container;
    typeof _ref$2 === "function" ? _ref$2(_el$2) : container = _el$2;

    insert(_el$2, () => props.children);

    insert(_el$, createComponent(DefaultIcon, {
      get name() {
        return iconName();
      },

      "class": "edit-text-icon",

      get onClick() {
        return control([() => {
          iconName('check');
          copy(container.textContent, {
            format: 'text/plain'
          });
        }, () => sleep(1000), () => iconName('content_copy')]);
      },

      color: "green"
    }), null);

    effect(_p$ => {
      const _v$ = props.class(),
            _v$2 = props.style;

      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined
    });

    return _el$;
  })();
}); // TODO 可编辑文本框

const EllipsisText = OriginComponent(props => {
  const line = atom(props.line);
  const isOpen = createMemo(() => typeof line() === 'number');
  return (() => {
    const _el$3 = _tmpl$2.cloneNode(true);

    const _ref$3 = props.ref;
    typeof _ref$3 === "function" ? _ref$3(_el$3) : props.ref = _el$3;

    spread(_el$3, () => extendsEvent(props), false, true);

    insert(_el$3, createComponent(Icon, {
      "class": "scale-150 cursor-pointer px-1 text-sky-500",

      get name() {
        return isOpen() ? 'arrow_drop_down' : 'arrow_drop_up';
      },

      onClick: () => isOpen() ? line('unset') : line(props.line)
    }), null);

    insert(_el$3, () => props.children, null);

    effect(_p$ => {
      const _v$3 = props.class('text-ellipsis'),
            _v$4 = {
        display: '-webkit-box',
        '-webkit-box-orient': 'vertical',
        'line-clamp': line(),
        '-webkit-line-clamp': line(),
        overflow: 'hidden',
        ...props.style
      };

      _v$3 !== _p$._v$3 && className(_el$3, _p$._v$3 = _v$3);
      _p$._v$4 = style(_el$3, _v$4, _p$._v$4);
      return _p$;
    }, {
      _v$3: undefined,
      _v$4: undefined
    });

    return _el$3;
  })();
});

const cache = new Set();
/** @zh 根据 url 加载 link 标签 */

const loadLink = async path => {
  if (cache.has(path)) return;
  return new Promise((res, rej) => {
    const link = document.createElement('link');
    link.href = path;
    link.rel = 'stylesheet';
    document.body.appendChild(link);

    link.onload = () => {
      res(true);
      cache.add(path);
    };

    link.onerror = () => {
      rej(false);
    };
  });
};

/**
 * @zh 动态字体注入器
 */

const useFont = () => {
  return {
    /**
     * @zh 向全局注册字体 CSS 变量
     */
    register(fontFamily, cssVarName = '--font-special') {
      document.documentElement.style.setProperty(cssVarName, fontFamily);
    },

    /** @zh 加载字体 URL Link */
    loadFont(url) {
      return loadLink(url);
    }

  };
};

const _tmpl$ = /*#__PURE__*/template(`<div class="cn-typography-wrapper"><article></article></div>`, 4);
/**
 * @zh 兼容中文排版的文本专用容器，自动响应式组件。在内部使用的 HTML 标签样式将不同
 *
 */

const Typography = OriginComponent(props => {
  return (() => {
    const _el$ = _tmpl$.cloneNode(true),
          _el$2 = _el$.firstChild;

    const _ref$ = props.ref;
    typeof _ref$ === "function" ? _ref$(_el$2) : props.ref = _el$2;

    spread(_el$2, () => extendsEvent(props), false, true);

    insert(_el$2, () => props.children);

    effect(_p$ => {
      const _v$ = props.class('cn-typography max-w-2xl md:max-w-2xl'),
            _v$2 = { ...props.style
      };

      _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
      _p$._v$2 = style(_el$2, _v$2, _p$._v$2);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined
    });

    return _el$;
  })();
});

export { CopyText, EllipsisText, Typography, useFont };
