import trackAnalyticsEvent from '@/lib/trackAnalyticsEvent';
import { AccountContext } from '@/lib/useAccount';
import { darkLine, newBlue } from '@/styles/colors';
import { BELOW_W_512 } from '@/styles/dimensions';
import { UserRole } from '@/types';
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { Dispatch, SetStateAction, useCallback, useContext, useEffect, useState } from 'react';
import { BracketButton } from './Buttons';
import { AuthModalState } from './auth/AuthModal';

const fadeIn = keyframes`
0% { opacity: 0; transform: translateX(-50%) }
100% { opacity: 1; transform: translateX(-50%) }
`;
const Container = styled.div<{ fadeOut: boolean }>`
  z-index: 12;
  position: fixed;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid ${darkLine};
  border-radius: 4px;
  top: 53px; // height of the header + 5px
  left: 50%;
  padding: 1rem 1rem 1rem 1.25rem;
  animation: ${fadeIn} 0.5s;
  opacity: ${(props) => (props.fadeOut ? 0 : 1)};
  transform: translateX(-50%);
  transition: all 0.5s;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;

  h1 {
    font-family: Architekt;
    font-size: 1.5rem;
    margin: 0;
    margin-bottom: 2px;
    font-weight: 700;
  }
  p {
    font-size: 1.5rem;
    margin: 0;
    white-space: nowrap;
  }
  a {
    color: ${newBlue};
    cursor: pointer;
  }
  input {
    font-family: Architekt;
    font-size: 1.5rem;
    margin-top: -0.5rem;
    padding: 2px;
    border: none;
    width: auto;
    text-align: center;
  }

  @media screen and (${BELOW_W_512}) {
    width: calc(100% - 10px);
    gap: 20px;
    p {
      white-space: wrap;
    }
  }
`;

const HIDE_SCROLL_DIST = 200;
const PromoModal = ({ setAuthModalOpen }: { setAuthModalOpen: Dispatch<SetStateAction<AuthModalState>> }) => {
  const TRANSITION_TIME = 500;
  const [isOpen, setIsOpen] = useState(true);
  const [transitioningOut, setTransitioningOut] = useState(false);
  const account = useContext(AccountContext).account;

  const loggedIn = account && ![UserRole.LoggedOut, UserRole.Unknown, UserRole.Waitlist].includes(account!.role);
  const isSub = !!account?.plan;

  const showSignIn = useCallback(() => {
    setAuthModalOpen('register');
    trackAnalyticsEvent({
      name: 'Landing Button Clicked',
      properties: {
        text: 'Create an account',
        location: 'Promo Modal',
      },
    });
  }, [setAuthModalOpen]);

  useEffect(() => {
    const listenForDismissModal = () => {
      if (window.scrollY > HIDE_SCROLL_DIST) {
        if (isOpen) {
          setTransitioningOut(true);
          setTimeout(() => {
            setIsOpen(false);
            setTransitioningOut(false);
          }, TRANSITION_TIME);
        }
      } else {
        if (isOpen) return;
        setTimeout(() => setIsOpen(true), TRANSITION_TIME); // avoid conflict with modal closing
      }
    };
    listenForDismissModal();
    window.addEventListener('scroll', listenForDismissModal);
    return () => window.removeEventListener('scroll', listenForDismissModal);
  }, [isOpen, transitioningOut]);

  if (!isOpen) return null;

  let header = <h1>Now With VST Support</h1>;
  let description = <p>Use your favorite plugins right in the browser!</p>;

  const learnMoreText = 'Learn more';

  if (!account || account.role === UserRole.Unknown) return null;

  return (
    <Container fadeOut={transitioningOut}>
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        {header}
        {description}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 120 }}>
        <a
          style={{ textDecoration: 'none' }}
          href="/plugin-bridge"
          target="_blank"
          onClick={() => {
            trackAnalyticsEvent({
              name: 'Landing Link Clicked',
              properties: {
                text: learnMoreText,
                location: 'Promo Modal',
              },
            });
          }}
        >
          <BracketButton>{learnMoreText}</BracketButton>
        </a>
      </div>
    </Container>
  );
};

export default PromoModal;