import { getModuleByDisplayName } from '@vizality/webpack';
import { findInReactTree, wrapInHooks } from '@vizality/util/react';

import AsyncComponent from './AsyncComponent';

export default AsyncComponent.from((async () => {
  const GuildSettingsRolesEditDisplay = await getModuleByDisplayName('GuildSettingsRolesEditDisplay', true);
  const SettingsPageContent = wrapInHooks(() => new GuildSettingsRolesEditDisplay({ guild: { id: '' }, role: { id: '' } }))();
  const ColorPickerFormItem = findInReactTree(SettingsPageContent, (n) => n.type?.displayName === 'ColorPickerFormItem').type({ role: { id: '' } });
  const SuspendedPicker = findInReactTree(ColorPickerFormItem, (n) => n.props?.defaultColor).type;
  const LazyWebpackModule = await SuspendedPicker().props.children.type;
  const mdl = await (LazyWebpackModule._ctor || LazyWebpackModule._payload._result)();
  return mdl.default;
})());
