import React, { memo, useState, useEffect, useRef, createRef, useMemo } from 'react';

import { UserProfile, UserPopout, Icon, SearchBar, KeyboardShortcut, KeybindRecorder, Text, HeaderBarContainer, FormNotice, Notice, Avatar, NumberBadge, TextBadge, IconBadge, ProgressBar, ErrorBoundary } from '@vizality/components';
import { getModuleByDisplayName, getModule, getModulesByKeyword } from '@vizality/webpack';

const TransitionGroup = getModuleByDisplayName('TransitionGroup');
const SlideIn = getModuleByDisplayName('SlideIn');

const { getCurrentUser } = getModule('getCurrentUser');

/*
 * const { PremiumPaymentGuildAnimation } = getModule('PremiumPaymentGuildAnimation');
 * const { usePaymentModalAnimationScene } = getModule('usePaymentModalAnimationScene');
 */
export default memo(() => {
  const [ completed, setCompleted ] = useState(0);
  const refs = useRef([]);
  const [ showOrHide, setShowOrHide ] = useState([]);

  useEffect(() => {
    refs.current.forEach(ref => {
      setShowOrHide(oldArray => [ ...oldArray, getComputedStyle(ref)?.backgroundImage?.startsWith('url') ? 'block' : 'none' ]);
    });
    setInterval(() => setCompleted(Math.floor(Math.random() * 100) + 1), 2000);
  }, []);

  const imageClasses = [];
  getModulesByKeyword('image').forEach(mdl => {
    Object.keys(mdl).forEach(m => {
      if (typeof m === 'string' && m.toLowerCase().includes('image')) {
        if (typeof mdl[m] === 'string') {
          imageClasses.push(mdl[m]);
        }
      }
    });
  });

  return (
    <ErrorBoundary>
      <div class='discord-images-test' style={ { columnCount: 5, columnGap: 40, columnWidth: 200 } }>
        {imageClasses.map((image, index) => (
          <div class='discord-images-test-image-wrapper' style={ { position: 'relative', width: 200, height: 200, breakInside: 'avoid-column', display: showOrHide[index], marginBottom: 40 } }>
            <div className={image} ref={element => refs.current[index] = element} style={
              {
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'contain',
                width: '100%',
                height: '100%',
                position: 'relative',
                inset: 'unset'
              }
            } />
          </div>
        ))}
      </div>
      {/* e.WAITING = "WAITING",
      e.PURCHASING = "PURCHASING",
      e.FAIL = "FAIL",
      e.COMPLETED = "COMPLETED" */}
      {/* <PremiumPaymentGuildAnimation
          nextScene={
            usePaymentModalAnimationScene({
              purchaseState: 'PURCHASING',
              currentStep: 'confirm',
              initialScene: PremiumPaymentGuildAnimation.Scenes.ENTRY,
              purchaseScene: PremiumPaymentGuildAnimation.Scenes.STARS,
              errorScene: PremiumPaymentGuildAnimation.Scenes.ERROR,
              successScene: PremiumPaymentGuildAnimation.Scenes.SUCCESS
            })[0]
          }
          onScenePlay={PremiumPaymentGuildAnimation.getNextScene}
          pauseWhileUnfocused={false}
        /> */}
      <ProgressBar completed={completed} />
      <SearchBar query='bob' size={SearchBar.Sizes.SMALL} />
      <SearchBar query='bob' size={SearchBar.Sizes.MEDIUM} />
      <SearchBar query='bob' size={SearchBar.Sizes.LARGE} />
      <SearchBar query='bob' disabled />
      <SearchBar query='bob' isLoading />
      {/* "icon",  "color", "shape", "disableColor", "className" */}
      <NumberBadge count='40' color="#9c84ef" shape='baseShapeRoundLeft-ym85l3' />
      <IconBadge icon={() => <Icon name='activity' />} color="#9c84ef" shape='baseShapeRoundLeft-ym85l3' />
      <TextBadge text='Coolio' color="#9c84ef" shape='baseShapeRoundLeft-ym85l3' />
      <Notice color={Notice.Colors.DANGER} />
      <UserPopout user={getCurrentUser()} />
      <UserProfile user={getCurrentUser()} />
      <HeaderBarContainer>
        <Text>I like pie</Text>
      </HeaderBarContainer>
      <TransitionGroup style={{ position: 'relative', height: 100 }}>
        <SlideIn>
          <FormNotice
            className='poo'
            type={FormNotice.Types.WARNING}
            title={'i like'}
            body={'apple pie'}
          />
        </SlideIn>
      </TransitionGroup>
      <Avatar
        isTyping={true}
        isMobile={true}
        src='https://cdn.discordapp.com/avatars/597905003717459968/74809b431684d381a5ed0637f8adbf91.png'
        status='online'
        statusTooltip={true}
        size={Avatar.Sizes.SIZE_32}
      />
      <video autoPlay loop autoPictureInPicture controls={false}>
        <source src="https://www.kelp.agency/wp-content/uploads/2020/06/orbit_1_1.webm" type="video/webm" />
      </video>
      <KeybindRecorder defaultValue={[ [ 0, 162 ], [ 0, 66 ] ]} />
      <KeyboardShortcut shortcut='ctrl+p' />
      <KeyboardShortcut shortcut='ctrl+l' />
      <KeyboardShortcut shortcut='ctrl+a' />
      <KeyboardShortcut shortcut='ctrl+y' />
    </ErrorBoundary>
  );
});
