import { insert, createComponent, effect, className, spread, style, template } from 'solid-js/web';
import { createContext, useContext, For, mergeProps, createEffect, createMemo, Show } from 'solid-js';
import { OriginComponent, atom, extendsEvent } from '@cn-ui/use';
import { Button } from '@cn-ui/core';

const _tmpl$$1 = /*#__PURE__*/template(`<div></div>`, 2);
const TabsContext = createContext();
const TabsHeader = OriginComponent(props => {
  const {
    activeId,
    TabsData
  } = useContext(TabsContext); // TODO Tab 增删

  return (() => {
    const _el$ = _tmpl$$1.cloneNode(true);

    insert(_el$, createComponent(For, {
      get each() {
        return TabsData();
      },

      get children() {
        return props.tab ?? (data => {
          return createComponent(Button, {
            "class": "border-none",

            get color() {
              return data.id === activeId() ? 'sky' : 'white';
            },

            square: true,
            onClick: () => activeId(data.id),

            get children() {
              return data.id;
            }

          });
        });
      }

    }), null);

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

    effect(() => className(_el$, props.class('cn-tabs-header flex')));

    return _el$;
  })();
});
const Tabs = OriginComponent(props => {
  props = mergeProps({}, props);
  const TabsData = atom([]);
  const activeId = atom(null);
  createEffect(() => {
    if (TabsData().length && activeId() === null) {
      activeId(TabsData()[0].id);
    }
  });
  return createComponent(TabsContext.Provider, {
    value: {
      register(data) {
        TabsData([...TabsData(), data]);
      },

      activeId,
      TabsData
    },

    get children() {
      const _el$2 = _tmpl$$1.cloneNode(true);

      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-tabs'),
              _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$2;
    }

  });
});

const _tmpl$ = /*#__PURE__*/template(`<div></div>`, 2);
const Tab = OriginComponent(props => {
  const {
    activeId,
    register
  } = useContext(TabsContext);
  props = mergeProps({
    destroyOnHide: true
  }, props);
  register(props);
  const show = createMemo(() => {
    if (!props.destroyOnHide) return true;
    return props.destroyOnHide && activeId() === props.id;
  });
  return createComponent(Show, {
    get when() {
      return show();
    },

    get children() {
      const _el$ = _tmpl$.cloneNode(true);

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

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

      effect(_p$ => {
        const _v$ = props.class(),
              _v$2 = {
          display: activeId() === props.id ? 'block' : 'none',
          ...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 { Tab, Tabs, TabsContext, TabsHeader };
