import { useCallback, useRef } from 'react';
import dispatchAtableField from '../../../../dispatch/dispatch-a-table-field';
import dispatchResizeImageCF from '../../../../dispatch/dispatch-resize-image-cf';
import dispatchFlatpicker from '../../../../dispatch/dispatch-flatpicker';
import dispatchLiteEditorField from '../../../../dispatch/dispatch-lite-editor-field';
import { upgradeLegacyBlockEditors } from '../../../../elements/upgrade-legacy-marks';
import dispatchSelect2 from '../../../../dispatch/dispatch-select2';
import dispatchMediaField from '../../../../dispatch/media/dispatch-media-field';
import dispatchRichEditor from '../../../../dispatch/dispatch-rich-editor';

/**
 * カスタムユニットで利用できる組み込みJS
 * - fieldgroupSortable / wysiwyg は ACMS グローバル経由
 * - a-table-field / resize-image-cf / flatpicker / lite-editor-field / block-editor /
 *   rich-editor / select2 / media-field は本体（dispatch/*）を直接呼び出す
 *
 * custom ユニット定義自体を本体側（features/unit-editor）に置くことで、
 * unit-editor パッケージ側にはこの本体依存を一切持ち込まない
 * （@ablogcms/unit-editor の core/components/server-side-renderer は公開APIとして参照するのみ）。
 */
export default function useBuildinJs() {
  const ref = useRef<HTMLScriptElement>(null);

  const apply = useCallback(() => {
    if (ref.current) {
      $(ACMS.Config.fieldgroupSortableMark, ref.current).each(function () {
        ACMS.Dispatch.fieldgroupSortable(this);
      });

      ACMS.Dispatch.wysiwyg.dispatch(ref.current);
      dispatchAtableField(ref.current);
      dispatchResizeImageCF(ref.current);
      dispatchFlatpicker(ref.current);
      dispatchLiteEditorField(ref.current);
      upgradeLegacyBlockEditors(ref.current);
      dispatchRichEditor(ref.current);
      // Why not: select2 既定の width: 'resolve' は初期化時点の要素の computed style から幅を測る。
      // カスタムユニットは ServerSideRenderer が html 更新のたびに select2 を再初期化するが
      // （server-side-renderer/index.tsx 参照）、グループユニットをまたぐ D&D 移動や複製では
      // React が対象ユニットを別ツリーへアンマウント→再マウントするため、そのたびに再初期化が
      // 走り直す。折りたたみで display: none のまま初期化される場合と合わせ、可視性やマウント
      // タイミングに依存しやすいため、ユニットエディタ配下の select2 だけ固定幅にする。
      dispatchSelect2(ref.current, { width: '100%' });
      dispatchMediaField(ref.current);
    }
  }, []);

  return {
    ref,
    apply,
  };
}
