import { Section, Card, WaveDivider } from '@vizality/components/dashboard';
import React, { memo, useEffect, useState } from 'react';
import { Button, Icon } from '@vizality/components';
import { getModule } from '@vizality/webpack';
import { Guild } from '@vizality/constants';

export default memo(() => {
  const [ hasJoinedDiscord, setHasJoinedDiscord ] = useState(false);
  const guilds = getModule('getGuild', 'getGuilds').getGuilds();
  const { getCurrentUser } = getModule('getCurrentUser');
  const { username } = getCurrentUser();

  useEffect(() => {
    setHasJoinedDiscord(Object.keys(guilds).some(guild => guild === Guild.ID));
  }, []);

  return (
    <>
      <Section className='vz-dashboard-home-section-cta'>
        <div className='vz-dashboard-home-cta'>
          <div className='vz-dashboard-home-cta-overlay-background'>
            <div className='vz-dashboard-home-cta-background' />
          </div>
          <div className='vz-dashboard-home-cta-content'>
            <Icon
              className='vz-dashboard-home-cta-content-icon-wrapper'
              iconClassName='vz-dashboard-home-cta-content-icon'
              name='vizality'
              size='100%'
            />
            <div className='vz-dashboard-home-cta-content-header-wrapper'>
              <h1 className='vz-dashboard-home-cta-content-header'>Welcome, {username}!</h1>
              <h3 className='vz-dashboard-home-cta-content-description'>
                You've made the right choice. The power of customization is now at your fingertips. Check out the features below to learn how to harness your newfound power.
                {!hasJoinedDiscord && ` Make sure you check out the Discord server, we'd love to have you!`}
              </h3>
              {!hasJoinedDiscord && <div className='vz-dashboard-home-cta-content-buttons-wrapper'>
                <Button
                  className='vz-dashboard-home-cta-content-button'
                  onClick={() => {
                    const inviteStore = getModule('acceptInviteAndTransitionToInviteChannel');
                    const pop = getModule('popLayer');
                    inviteStore.acceptInviteAndTransitionToInviteChannel(Guild.INVITE);
                    pop.popAllLayers();
                  }}
                  color={Button.Colors.WHITE}
                  look={Button.Looks.FILLED}
                  size={Button.Sizes.LARGE}
                >
                  Join the Discord Server
                </Button>
              </div>}
            </div>
          </div>
          <Icon
            className='vz-dashboard-home-cta-icon-wrapper'
            name='person-waving'
            size='100%'
          />
          <WaveDivider />
        </div>
      </Section>
      <Section className='vz-dashboard-home-section-features'>
        <div className='vz-dashboard-home-features-wrapper'>
          <div className='vz-dashboard-home-features'>
            <Card
              icon='plugin'
              header='Discover Plugins'
              description='Explore our vast collection of official plugins. Plugins can add just about any new feature you can imagine to Discord.'
              buttonText='Browse Plugins'
              route='/vizality/plugins/browse'
            />
            <Card
              icon='theme'
              header='Discover Themes'
              description='Explore our vast collection of official themes. Themes can change just small portions of the app or they can be full-blown redesigns.'
              buttonText='Browse Themes'
              route='/vizality/themes/browse'
            />
            <Card
              icon='unknown-user'
              header='Become a Developer'
              description='Find out what it takes to start making your own plugins and themes. Come check out the guidelines and all the info you need to become an addon developer for Vizality.'
              buttonText='Learn How'
              route='/vizality/development'
            />
            <Card
              icon='science'
              header='Read the Docs'
              description='Read about all the building blocks and tools we provide to make building plugins and themes easier for you.'
              buttonText='Start Reading'
              route='/vizality/docs'
            />
          </div>
        </div>
      </Section>
    </>
  );
});
