import { spread, insert, createComponent, addEventListener, memo, effect, className, style, delegateEvents, template } from 'solid-js/web';
import { For } from 'solid-js';
import { OriginComponent, atom, reflect, useEventController, extendsEvent } from '@cn-ui/use';
import { Breadcrumb, Space, Icon } from '@cn-ui/core';

const _tmpl$ = /*#__PURE__*/template(`<div></div>`, 2),
      _tmpl$2 = /*#__PURE__*/template(`<div class="flex w-full cursor-pointer items-center text-left"><span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap"></span></div>`, 4);
const Explorer = OriginComponent(props => {
  const now = atom([]);
  const nowList = reflect(() => {
    const nowPath = now().length === 0 ? '/' : '/' + now().join('/') + '/';
    const innerFiles = props.Files().filter(i => {
      return i.fullPath.startsWith(nowPath);
    });
    const directorySet = new Set();
    const last = innerFiles.filter(i => {
      const name = i.fullPath.replace(nowPath, '');
      const isDirectory = name.includes('/');

      if (isDirectory) {
        directorySet.add(name.split('/')[0]);
        return false;
      }

      return true;
    });
    return [...directorySet.values()].map(i => {
      return {
        name: i,
        fullPath: nowPath + i,
        isDirectory: true
      };
    }).concat(last);
  });
  const control = useEventController({});
  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(Breadcrumb, {
      list: now,
      onTrigger: index => now(i => i.slice(0, index))
    }), null);

    insert(_el$, createComponent(Space, {
      vertical: true,
      "class": "h-full w-full flex-1 overflow-auto",

      get children() {
        return createComponent(For, {
          get each() {
            return nowList();
          },

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

              insert(_el$2, createComponent(Icon, {
                "class": "px-2",
                size: "1.5em",

                get name() {
                  return item.isDirectory ? 'folder' : 'insert_drive_file';
                },

                get classList() {
                  return {
                    'text-sky-600': item.isDirectory,
                    'text-teal-600': !item.isDirectory
                  };
                }

              }), _el$3);

              addEventListener(_el$3, "click", control([async () => {
                if (item.isDirectory) {
                  return props.onOpenFolder && props.onOpenFolder(item);
                } else {
                  props.onOpenFile && (await props.onOpenFile(item));
                  return false;
                }
              }, () => !!now(i => i.concat(item.name))]), true);

              insert(_el$3, () => item.name);

              insert(_el$2, (() => {
                const _c$ = memo(() => !!item.isDirectory, true);

                return () => _c$() ? (() => {
                  const _c$2 = memo(() => !!props.FolderExtra, true);

                  return () => _c$2() && props.FolderExtra(item);
                })() : (() => {
                  const _c$3 = memo(() => !!props.FileExtra, true);

                  return () => _c$3() && props.FileExtra(item);
                })();
              })(), null);

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

    }), null);

    effect(_p$ => {
      const _v$ = props.class('cn-explorer flex h-full w-full flex-col p-2'),
            _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$;
  })();
});

delegateEvents(["click"]);

export { Explorer };
