import { AnimatePresence, motion } from 'framer-motion';
import React from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import logWebUserEvent from '@/logging/logWebUserEvent';

import { SectionViewLogger } from '../HomePageClient';
import { LoadingSongCard } from '../components/LoadingSongCard';

interface CreateSongDemoSectionProps {
  songsReady: boolean;
  randomAura1: string;
  randomAura2: string;
  randomGenerationTime1: number;
  randomGenerationTime2: number;
  onCreateRedirect: () => void;
  songsAlmostReady?: string;
  songsReadyText?: string;
  signUpToListen?: string;
}

const CreateSongDemoSection: React.FC<CreateSongDemoSectionProps> = ({
  songsReady,
  randomAura1,
  randomAura2,
  randomGenerationTime1,
  randomGenerationTime2,
  onCreateRedirect,
  songsAlmostReady = 'Your songs are almost ready',
  songsReadyText = 'Your songs are ready',
  signUpToListen = 'Sign up for free to listen',
}) => {
  return (
    <AnimatePresence mode='wait'>
      <motion.section
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -20 }}
        transition={{
          type: 'tween',
          duration: 0.5,
          ease: 'easeInOut',
        }}
      >
        <div className='relative flex min-h-[100vh] flex-col items-center justify-center'>
          <section className='w-full'>
            <div className='flex items-center justify-center text-center'></div>
            <div>
              <SectionViewLogger sectionName='YourSongsAreAlmostReady' />
              <AnimatePresence mode='wait'>
                <motion.h1
                  key={songsReady ? 'ready' : 'almost-ready'}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -20 }}
                  transition={{ duration: 0.4 }}
                  className='mx-auto max-w-[300px] text-center font-sans text-5xl leading-[64px] font-medium text-white md:max-w-[600px] md:text-7xl'
                >
                  {songsReady ? songsReadyText : songsAlmostReady}
                </motion.h1>
              </AnimatePresence>
            </div>

            <div className='mx-auto mt-[23px] flex w-[272px] gap-[15px]'>
              <LoadingSongCard
                imageUrl={randomAura1}
                loadingDuration={randomGenerationTime1}
                onClick={() => {
                  onCreateRedirect();
                  logWebUserEvent({
                    actionName: 'HomePageSongsReadyPlayButtonClicked',
                    context: { position: 1 },
                  });
                }}
              />
              <LoadingSongCard
                imageUrl={randomAura2}
                loadingDuration={randomGenerationTime2}
                onClick={() => {
                  onCreateRedirect();
                  logWebUserEvent({
                    actionName: 'HomePageSongsReadyPlayButtonClicked',
                    context: { position: 2 },
                  });
                }}
              />
            </div>
          </section>

          <div className='mt-[27px] text-center'>
            <Button
              variant={ButtonVariant.Aura}
              size={ButtonSize.Large}
              shape={ButtonShape.Pill}
              onClick={() => {
                onCreateRedirect();
                logWebUserEvent({
                  actionName: 'HomePageSignUpButtonClickedOnGenerationPage',
                });
              }}
              className='px-[50px]'
            >
              {signUpToListen}
            </Button>
          </div>
        </div>
      </motion.section>
    </AnimatePresence>
  );
};

export default CreateSongDemoSection;