import { spread, insert, createComponent, effect, classList, className, style, template } from 'solid-js/web';
import { OriginComponent, reflect, extendsEvent } from '@cn-ui/use';
import { For } from 'solid-js';
import zxcvbn from 'zxcvbn';

const _tmpl$ = /*#__PURE__*/template(`<div></div>`, 2),
      _tmpl$2 = /*#__PURE__*/template(`<div class=" h-1 flex-1 mx-1 rounded bg-slate-300 transition"></div>`, 2);

/** 这个组件一般会被异步载入 */
const PasswordScore = OriginComponent(props => {
  const score = reflect(() => {
    return props.value() ? zxcvbn(props.value(), props.userInputs ?? []).score + 1 : 0;
  });
  return (() => {
    const _el$ = _tmpl$.cloneNode(true);

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

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

    insert(_el$, createComponent(For, {
      get each() {
        return [...Array(5).keys()];
      },

      children: item => {
        return (() => {
          const _el$2 = _tmpl$2.cloneNode(true);

          effect(_$p => classList(_el$2, {
            // ! tailwind 的一个毛病，只有写在 class 中才会被识别。。。
            [reflect(() => {
              const s = score();
              return s > 3 ? 'bg-green-500' : s > 1 ? 'bg-orange-500' : 'bg-red-500';
            })()]: item < score()
          }, _$p));

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

    effect(_p$ => {
      const _v$ = props.class('w-full my-0 flex '),
            _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$;
  })();
});

export { PasswordScore };
