import { getModule, getModuleByDisplayName } from '@vizality/webpack';

import { Icons } from './Icon';
import AsyncComponent from './AsyncComponent';

export const ImageCarouselModal = AsyncComponent.fromDisplayName('componentDispatchSubscriber(ModalCarousel)');
export const GIFPickerSearchResults = AsyncComponent.fromDisplayName('GIFPickerSearchResults');
export const DiscoverySidebarHeader = AsyncComponent.fetchFromProps('DiscoverySidebarHeader');
export const AdvancedScrollerThin = AsyncComponent.fetchFromProps('AdvancedScrollerThin');
export const AdvancedScrollerAuto = AsyncComponent.fetchFromProps('AdvancedScrollerAuto');
export const AdvancedScrollerNone = AsyncComponent.fetchFromProps('AdvancedScrollerNone');
export const CarouselWithPreview = AsyncComponent.fetchFromProps('CarouselWithPreview');
export const HeaderBarContainer = AsyncComponent.fromDisplayName('HeaderBarContainer');
export const LazyImageZoomable = AsyncComponent.fromDisplayName('LazyImageZoomable');
export const KeyboardShortcut = AsyncComponent.fromDisplayName('KeyboardShortcut');
export const Avatar = AsyncComponent.fetchFromProps('AnimatedAvatar', 'default');
export const ContextMenu = AsyncComponent.fetchFromProps('MenuGroup', 'default');
export const KeybindRecorder = AsyncComponent.fromDisplayName('KeybindRecorder');
export const Helmet = AsyncComponent.fetchFromProps('HelmetProvider', 'Helmet');
export const UserPopout = AsyncComponent.fromDisplayName('ConnectedUserPopout');
export const HelmetProvider = AsyncComponent.fetchFromProps('HelmetProvider');
export const Autocomplete = AsyncComponent.fromDisplayName('Autocomplete');
export const UserProfile = AsyncComponent.fromDisplayName('UserProfile');
export const ShinyButton = AsyncComponent.fromDisplayName('ShinyButton');
export const WebhookCard = AsyncComponent.fromDisplayName('WebhookCard');
export const Tooltip = AsyncComponent.fetchFromProps('TooltipContainer');
export const HelpMessage = AsyncComponent.fromDisplayName('HelpMessage');
export const Button = AsyncComponent.from(getModule('Link', 'Hovers', 'Sizes', true));
export const FormNotice = AsyncComponent.fromDisplayName('FormNotice');
// "count", "color", "shape", "disableColor", "className"
export const NumberBadge = AsyncComponent.fetchFromProps('NumberBadge');
// "text",  "color", "shape", "disableColor", "className"
export const TextBadge = AsyncComponent.fetchFromProps('TextBadge');
// "icon",  "color", "shape", "disableColor", "className"
export const IconBadge = AsyncComponent.fetchFromProps('IconBadge');
export const Checkbox = AsyncComponent.fromDisplayName('Checkbox');
export const Popout = AsyncComponent.fromDisplayName('Popout');
export const ImageModal = AsyncComponent.fromDisplayName('ImageModal');
export const Confirm = AsyncComponent.fromDisplayName('ConfirmModal');
export const HoverRoll = AsyncComponent.fromDisplayName('HoverRoll'); // https://i.imgur.com/73wadZr.gif
export const LazyImage = AsyncComponent.fromDisplayName('LazyImage');
export const TextInput = AsyncComponent.fromDisplayName('TextInput');
export const SearchBar = AsyncComponent.fromDisplayName('SearchBar');
export const Clickable = AsyncComponent.fromDisplayName('Clickable');
export const FormTitle = AsyncComponent.fromDisplayName('FormTitle');
export const HeaderBar = AsyncComponent.fromDisplayName('HeaderBar');
export const Modal = AsyncComponent.fetchFromProps('ModalRoot');
export const FormText = AsyncComponent.fromDisplayName('FormText');
export const FormItem = AsyncComponent.fromDisplayName('FormItem');
export const Spinner = AsyncComponent.fromDisplayName('Spinner');
export const SlideIn = AsyncComponent.fetchFromProps('SlideIn');
/*
 * id
 * onChange
 * checked
 * disabled
 * className
 */
export const Switch = AsyncComponent.fromDisplayName('Switch');
export const TabBar = AsyncComponent.fromDisplayName('TabBar');
export const Notice = AsyncComponent.fromDisplayName('Notice');
export const Header = AsyncComponent.fromDisplayName('Header');

export const Table = AsyncComponent.fromDisplayName('Table');
export const Image = AsyncComponent.fromDisplayName('Image');
export const Video = AsyncComponent.fromDisplayName('Video');
export const Card = AsyncComponent.fromDisplayName('Card');
export const Text = AsyncComponent.fromDisplayName('LegacyText');
export const Flex = AsyncComponent.fromDisplayName('Flex');

export { default as ProgressBar } from './ProgressBar';
export { default as ComponentPreview } from './ComponentPreview';
export { default as OverflowTooltip } from './OverflowTooltip';
export { default as AsyncComponent } from './AsyncComponent';
export { default as DeferredRender } from './DeferredRender';
export { default as ErrorBoundary } from './ErrorBoundary';
export { default as StickyElement } from './StickyElement';
export { default as ColorPicker } from './ColorPicker';
export { default as PopupWindow } from './PopupWindow';
export { default as FilterInput } from './FilterInput';
export { default as ErrorState } from './ErrorState';
export { default as CodeBlock } from './CodeBlock';
export { default as Markdown } from './Markdown';
export { default as Titlebar } from './Titlebar';
export { default as Divider } from './Divider';
export { default as Anchor } from './Anchor';
export { default as Editor } from './Editor';
export { default as Icon } from './Icon';

export { default as __TabBar } from './__TabBar';
import { NavItem } from './__TabBar';
this.__TabBar.NavItem = NavItem;

export * as dashboard from './dashboard';
export * as settings from './settings';
export * as vizality from './vizality';
export * as addon from './addon';

/**
 * Re-export module properties.
 */
getModuleByDisplayName('FormNotice', true, true).then(FormNotice => {
  this.FormNotice.Types = FormNotice.Types;
  this.FormNotice.ImagePositions = FormNotice.ImagePositions;
  this.FormNotice.Align = getModuleByDisplayName('Flex')?.Align;
});

getModuleByDisplayName('Spinner', true, true).then(Spinner => {
  this.Spinner.Types = Spinner.Type;
});

getModuleByDisplayName('Spinner', true, true).then(Spinner => {
  this.Spinner.Types = Spinner.Type;
});

/**
 * props:
 * children
 * className
 * fontSize
 * messageType
 */
getModule(m => m.default?.displayName === 'HelpMessage', true, true).then(HelpMessage => {
  this.HelpMessage.Types = HelpMessage.HelpMessageTypes;
  this.HelpMessage.FontSizes = HelpMessage.HelpMessageFontSizes;
});

getModule(m => m.default?.displayName === 'Notice', true, true).then(Notice => {
  this.Notice.Colors = {
    BLURPLE: Notice.NoticeColors.BRAND,
    RED: Notice.NoticeColors.DANGER,
    ORANGE: Notice.NoticeColors.DEFAULT,
    BLUE: Notice.NoticeColors.INFO,
    GREY: Notice.NoticeColors.NEUTRAL,
    DARK_GREY: Notice.NoticeColors.DARK,
    GREEN: Notice.NoticeColors.NOTIFICATION,
    BLURPLE_GRADIENT_1: Notice.NoticeColors.PREMIUM_TIER_1,
    BLURPLE_GRADIENT_2: Notice.NoticeColors.PREMIUM_TIER_2,
    SPOTIFY: Notice.NoticeColors.SPOTIFY,
    PURPLE: Notice.NoticeColors.STREAMER_MODE
  };
});

getModule(m => m.Link && m.Hovers, true, true).then(Button => {
  this.Button.Colors = Button.Colors;
  this.Button.Hovers = Button.Hovers;
  this.Button.Link = Button.Link;
  this.Button.Looks = Button.Looks;
  this.Button.Sizes = Button.Sizes;
});

getModule(m => m.default?.displayName === 'Tooltip', true, true).then(Tooltip => {
  this.Tooltip.Positions = Tooltip.TooltipPositions;
  this.Tooltip.Colors = Tooltip.TooltipColors;
});

getModuleByDisplayName('Popout', true, true).then(Popout => {
  this.Popout.Aligns = Popout.Align;
  this.Popout.Positions = Popout.Positions;
});

getModuleByDisplayName('HeaderBar', true, true).then(HeaderBar => {
  this.HeaderBar.Divider = HeaderBar.Divider;
  this.HeaderBar.Title = HeaderBar.Title;
  this.HeaderBar.Icon = HeaderBar.Icon;
});

getModuleByDisplayName('Card', true, true).then(Card => {
  this.Card.Types = Card.Types;
});

getModuleByDisplayName('TabBar', true, true).then(TabBar => {
  this.TabBar.Separator = TabBar.Separator;
  this.TabBar.Header = TabBar.Header;
  this.TabBar.Types = TabBar.Types;
  this.TabBar.Looks = TabBar.Looks;
  this.TabBar.Item = TabBar.Item;
  this.TabBar.Panel = TabBar.Panel;

  this.__TabBar.Separator = TabBar.Separator;
  this.__TabBar.Header = TabBar.Header;
  this.__TabBar.Types = TabBar.Types;
  this.__TabBar.Looks = TabBar.Looks;
  this.__TabBar.Item = TabBar.Item;
});

getModuleByDisplayName('SearchBar', true, true).then(SearchBar => {
  this.SearchBar.Sizes = SearchBar.Sizes;
  this.FilterInput.Sizes = SearchBar.Sizes;
});

getModule('NumberBadge', true, true).then(NumberBadge => {
  this.NumberBadge.Shapes = NumberBadge.BadgeShapes;
});

getModuleByDisplayName('TextInput', true, true).then(TextInput => {
  this.TextInput.Sizes = TextInput.Sizes;
});

getModuleByDisplayName('LegacyText', true, true).then(Text => {
  this.Text.Colors = Text.Colors;
  this.Text.Sizes = Text.Sizes;
});

getModuleByDisplayName('Header', true, true).then(Header => {
  this.Header.Tags = Header.Tags;
  this.Header.Sizes = Header.Sizes;
});

getModuleByDisplayName('Flex', true, true).then(Flex => {
  this.Flex.defaultProps = Flex.defaultProps;
  this.Flex.Direction = Flex.Direction;
  this.Flex.Justify = Flex.Justify;
  this.Flex.Align = Flex.Align;
  this.Flex.Child = Flex.Child;
  this.Flex.Wrap = Flex.Wrap;
});

getModule('AnimatedAvatar', true, true).then(Avatar => {
  this.Avatar.Sizes = Avatar.Sizes;
});

getModule('CarouselWithPreview', true, true).then(CarouselWithPreview => {
  this.CarouselWithPreview.Alignment = CarouselWithPreview.Alignment;
});

getModule('MenuGroup', true, true).then(ContextMenu => {
  const { MenuItemColor } = getModule('MenuItemColor');
  this.ContextMenu.CheckboxItem = ContextMenu.MenuCheckboxItem;
  this.ContextMenu.ControlItem = ContextMenu.MenuControlItem;
  this.ContextMenu.RadioItem = ContextMenu.MenuRadioItem;
  this.ContextMenu.Separator = ContextMenu.MenuSeparator;
  this.ContextMenu.Group = ContextMenu.MenuGroup;
  this.ContextMenu.Style = ContextMenu.MenuStyle;
  this.ContextMenu.Item = ContextMenu.MenuItem;
  this.ContextMenu.Item.Colors = MenuItemColor;
  this.ContextMenu.Menu = ContextMenu.default;
});

getModule('ModalRoot', true, true).then(Modal => {
  this.Modal.CloseButton = Modal.ModalCloseButton;
  this.Modal.Content = Modal.ModalContent;
  this.Modal.Footer = Modal.ModalFooter;
  this.Modal.Header = Modal.ModalHeader;
  this.Modal.ListContent = Modal.ModalListContent;
  this.Modal.Root = Modal.ModalRoot;
  this.Modal.Size = Modal.ModalSize;
});

this.Icon.Icons = Icons;
this.Icon.Names = Object.keys(Icons);

export default this;