import { gsap } from '@/lib/usePluggedGSAP';
import { darkLine, lightLine, lighterBlue, smoke, standardGrey } from '@/styles/colors';
import styled from '@emotion/styled';

import { useCallback } from 'react';
import InterfaceAnimation from './InterfaceAnimation';

const ConductorInterface = styled.div`
  width: 50rem;
  background-color: ${standardGrey};
  padding: 2.4rem;
  border-radius: 0.7rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
`;

const MessageList = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
`;

const ConductorMessage = styled.p`
  border-radius: 0.4rem;
  padding: 1rem 0.8rem;
  font-size: 1.7rem;
  background-color: ${darkLine};
  color: ${standardGrey};
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
`;

const UserMessage = styled(ConductorMessage)`
  align-self: flex-end;
  background-color: ${lighterBlue};
`;

const StatusMessage = styled.p`
  align-self: stretch;
  font-style: italic;
  text-align: center;
  margin: 0 0 2.4rem 0;
  padding: 0;
  color: ${darkLine};
`;

const SkillList = styled.div`
  margin-top: 10px;
  height: 0;
`;

const ConductorSkillTrigger = styled(ConductorMessage)`
  background: transparent;
  padding: 0.4rem 0;
  font-size: 1.4rem;
  font-family: Architekt;
  transform: translateX(10px);
  font-weight: 800;
  color: ${lighterBlue};
`;

const ConductorTextInput = styled.div`
  background-color: ${smoke};
  border-radius: 0.4rem;
  margin-top: 1.2rem;
  color: ${lightLine};
  display: flex;
  align-items: center;
  padding: 0 1.6rem;
  height: 5.4rem;
  font-size: 1.7rem;
  overflow: hidden;
`;

const PlaceholderText = styled.span`
  opacity: 0.5;
`;

const ContentText = styled.span``;

const DrumSelector = styled.div`
  opacity: 0;
  height: 0;
  display: grid;
  gap: 1.2rem;
  grid-template-rows: auto 5.4rem;
`;

const ConfirmButton = styled(ConductorTextInput)`
  border: 1px solid ${lighterBlue};
  font-family: Architekt;
  color: ${lighterBlue};
  background-color: transparent;
  transform: translateY(0);
  margin-top: 0;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
  justify-content: center;
`;

const InstrumentPicker = styled.div`
  border: 1px solid ${darkLine};
  border-radius: 0.4rem;
`;

const InstrumentPickerHeader = styled.header`
  color: ${darkLine};
  padding: 1.2rem 1.6rem;
  text-transform: uppercase;
  font-size: 1.2rem;
  border-bottom: 1px solid ${darkLine};
`;

const InstrumentList = styled.div`
  padding: 1.6rem;
`;

const InstrumentListItem = styled.div<{ active?: boolean }>`
  border-radius: 0.4rem;
  padding: 1.2rem 1.6rem;
  color: ${({ active }) => (active ? standardGrey : darkLine)};
  background-color: ${({ active }) => (active ? darkLine : 'transparent')};
  font-family: Architekt;
  font-size: 1.4rem;
  &:before {
    content: '▶';
    display: inline-block;
    margin-right: 1.2rem;
  }
`;

const ConductorInterfaceAnimation = () => {
  const animate = useCallback((animationContent: HTMLDivElement) => {
    const timeline = gsap.timeline();
    timeline
      .to(animationContent.querySelector('.msg-1'), { opacity: 1, translateY: 0, duration: 0.5 })
      .to(animationContent.querySelector('.msg-2'), { opacity: 1, translateY: 0, duration: 0.5 })
      .to(animationContent.querySelector('.skill-list'), { height: '7.5rem', duration: 0.5 })
      .to(animationContent.querySelector('.interface'), { height: '60rem', duration: 0.5 }, '<')
      .to(animationContent.querySelector('.skill-1'), { opacity: 1, translateX: 0, duration: 0.5 }, '-=0.25')
      .to(animationContent.querySelector('.skill-2'), { opacity: 1, translateX: 0, duration: 0.5 }, '-=0.25')
      .to(animationContent.querySelector('.skill-3'), { opacity: 1, translateX: 0, duration: 0.5 }, '-=0.25')
      .to(animationContent.querySelector('.placeholder'), { display: 'none', duration: 0 })
      .to(animationContent.querySelector('.input-content'), { text: 'make a funky beat', duration: 0.5, ease: 'none' })
      .to(animationContent.querySelector('.placeholder'), { display: 'inline', duration: 0 }, '+=0.25')
      .to(animationContent.querySelector('.input-content'), { display: 'none', duration: 0 }, '<')
      .to(animationContent.querySelector('.list-1'), { height: 0, opacity: 0, duration: 0 }, '<')
      .to(animationContent.querySelector('.user-msg'), { opacity: 1, translateY: 0, duration: 0.5 }, '<')
      .to(animationContent.querySelector('.list-3'), { height: 'auto', duration: 0 }, '<')
      .to(animationContent.querySelector('.msg-3'), { opacity: 1, translateY: 0, duration: 0.5 })
      .to(animationContent.querySelector('.msg-4'), { opacity: 1, translateY: 0, duration: 0.5 })
      .to(animationContent.querySelector('.drum-selector'), { height: '35rem', marginTop: '1.6rem', duration: 0 })
      .to(animationContent.querySelector('.drum-selector'), { opacity: 1, duration: 0.5 }, '<')
      .to(animationContent.querySelector('.add-button'), { backgroundColor: lighterBlue, duration: 0 }, '+=0.5')
      .to(animationContent.querySelector('.add-button'), { backgroundColor: 'transparent', duration: 0.1 }, '+=0.1')
      .to(animationContent.querySelector('.drum-selector'), { opacity: 0, duration: 0 }, '+=0.1')
      .to(animationContent.querySelector('.drum-selector'), { height: 0, marginTop: 0, duration: 0 })
      .to(animationContent.querySelector('.list-2'), { opacity: 0, height: 0, duration: 0 }, '<')
      .to(animationContent.querySelector('.list-3'), { opacity: 0, height: 0, duration: 0 }, '<')
      .to(animationContent.querySelector('.list-4'), { opacity: 1, height: 'auto', duration: 0 }, '<')
      .to(animationContent.querySelector('.msg-5'), { opacity: 1, translateY: 0, duration: 0.5 })
      .to(animationContent.querySelector('.msg-6'), { opacity: 1, translateY: 0, duration: 0.5 })
      .to(animationContent.querySelector('.msg-7'), { opacity: 1, translateY: 0, duration: 0.5 }, '+=0.25')
      .to(animationContent.querySelector('.msg-8'), { opacity: 1, translateY: 0, duration: 0.5 })
      .to(animationContent.querySelector('.compose-button'), { display: 'flex', duration: 0 })
      .to(animationContent.querySelector('.compose-button'), { opacity: 1, duration: 0.5 }, '<');
  }, []);
  return (
    <InterfaceAnimation onAnimate={animate}>
      <ConductorInterface className="interface">
        <div>
          <MessageList className="list-1">
            <ConductorMessage className="msg-1">Hello,</ConductorMessage>
            <ConductorMessage className="msg-2">How can I help?</ConductorMessage>
            <SkillList className="skill-list">
              <ConductorSkillTrigger className="skill-1">&gt;&gt; Add a Chord Progression</ConductorSkillTrigger>
              <ConductorSkillTrigger className="skill-2">&gt;&gt; Execute Timbre Transfer</ConductorSkillTrigger>
              <ConductorSkillTrigger className="skill-3">&gt;&gt; Stem Split</ConductorSkillTrigger>
            </SkillList>
          </MessageList>
          <MessageList className="list-2">
            <UserMessage className="user-msg">make a funky beat</UserMessage>
          </MessageList>
          <MessageList className="list-3" style={{ height: 0 }}>
            <ConductorMessage className="msg-3">Of course,</ConductorMessage>
            <ConductorMessage className="msg-4">First, let's select a drum preset</ConductorMessage>
          </MessageList>
          <MessageList className="list-4" style={{ height: 0 }}>
            <StatusMessage className="status-message">Added a new Drum track named “Heavy Drums”</StatusMessage>
            <ConductorMessage className="msg-5">Great! Now that you've added a drum track,</ConductorMessage>
            <ConductorMessage className="msg-6">would you like to create a pattern for it?</ConductorMessage>
            <ConductorMessage className="msg-7">Just select the new track you've</ConductorMessage>
            <ConductorMessage className="msg-8">created, and click the button:</ConductorMessage>
          </MessageList>
        </div>
        <div>
          <DrumSelector className="drum-selector">
            <InstrumentPicker>
              <InstrumentPickerHeader>Instruments / Drum Presets</InstrumentPickerHeader>
              <InstrumentList>
                <InstrumentListItem active>Heavy Drums</InstrumentListItem>
                <InstrumentListItem>Chill Drums</InstrumentListItem>
                <InstrumentListItem>Lo-Fi Drums</InstrumentListItem>
                <InstrumentListItem>808 Drums</InstrumentListItem>
                <InstrumentListItem>Techno Drums</InstrumentListItem>
              </InstrumentList>
            </InstrumentPicker>
            <ConfirmButton className="add-button">Add Heavy Drums to Project</ConfirmButton>
          </DrumSelector>
          <ConfirmButton className="compose-button" style={{ opacity: 0, display: 'none' }}>
            &gt;&gt; Compose with AI
          </ConfirmButton>
          <ConductorTextInput className="text-input">
            <PlaceholderText className="placeholder">Type Here</PlaceholderText>
            <ContentText className="input-content"></ContentText>
          </ConductorTextInput>
        </div>
      </ConductorInterface>
    </InterfaceAnimation>
  );
};

export default ConductorInterfaceAnimation;