/** @jsx jsx */
import { jsx } from '@emotion/core';
import styled from '@emotion/styled';
import {ReactComponent as Speaker} from '../../icons/Speaker.svg';
import { blue500, gray400, blue300, gray700, gray800, red500 } from '../../styles/colors_v2';
import { CornerButton, MajorButton } from '../../styles/elements';
import { ReactComponent as GeneratorIcon } from '../../icons/SmallGenerator.svg';
import { ReactComponent as RecordIcon } from '../../icons/Record.svg';
import { ReactComponent as UploadIcon } from '../../icons/Upload.svg';
import { useCallback, useContext, useState } from 'react';
import decodeAudio from '../../audio/utils/decodeAudio';
import audioContext from '../../audio/utils/audioContext';
import { ProjectContext } from '../../hooks/useProject';
import { expandedTrackHeight } from '../../styles/dimensions';
import Modal, { ModalBody, ModalButton, ModalTitle } from '../../Modal';
import { ScreenConfigurationContext } from '../../hooks/useScreenConfiguration';
import { CommandCategory } from '../../types';
import { CommandEditorContext } from '../../hooks/useCommandEditor';
import { WalkthroughContext, WalkthroughStep } from '../../hooks/useWalkthrough';

const Wrapper = styled.div`
  margin: 0 auto;
  max-width: 1400px;
  width: 100%;
  overflow: scroll;
  ::-webkit-scrollbar {
    display: none;
  }
`;

const Content = styled.div`
  padding: 40px 60px;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: stretch;
`;

const SpeakerWrap = styled.div`
  height: 100%;
  width: 50%;
  svg {
    width: 100%;
    height: 100%;
    * {
      stroke: ${gray700};
      stroke-width: 0.25px;
    }
  }
`;

const Interface = styled.div`
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 50%;
`;

const Title = styled.h2`
  font-family: 'Lexend Peta', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: ${gray800};
  font-size: 32px;
`;

const SectionTitle = styled.h3`
  color: ${gray700};
  font-size: 13px;
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 8px;
`;

const ButtonWrap = styled.div`
  display: flex;
  align-items: center;
  justify-content: flex-start;
`;

const WelcomeButton = styled(MajorButton)<{ secondary?: boolean }>`
  font-size: 13px;
  font-weight: 600;
  padding: 0 12px;
  height: 34px;
  margin-right: 10px;
  svg {
    margin-right: 6px;
  }
  ${({ secondary }) => secondary && `
    background-color: ${gray400};
    &:hover {
      background-color: ${gray700};
    }
  `}
`;

const RecordIconWrap = styled.div`
  height: 16px;
  svg * {
    fill: ${red500};
    stroke: currentColor;
  }
`;

const ProjectWrap = styled.div``;
const ProjectButton = styled(CornerButton)<{ emphasize?: boolean }>`
  padding-right: 4px;
  flex-direction: column;
  align-items: flex-start;
  ${({ emphasize }) => emphasize && `
    background-color: ${blue500};
    &:after {
      border-top-color: ${blue500};
    }
    &:hover {
      background-color: ${blue300};
      &:after {
        border-top-color: ${blue300};
      }
    }
  `}
`;

const ProjectButtonTitle = styled.h4`
  font-size: 18px;
  line-height: 18px;
  padding: 0;
  margin: 0 0 10px 0;
`
const ProjectButtonDescription = styled.p`
  font-size: 13px;
  padding: 0;
  margin: 0;
`

export default ({ startRecording }: { startRecording: () => void }) => {
  const project = useContext(ProjectContext);
  const loadDemoProject = useCallback(
    async (urlsAndTrackNames: [string, string][]) => {
      const buffers = await Promise.all(urlsAndTrackNames.map(([url]) => decodeAudio(url)));
      project.loadProjectState(
        {
          sampleRate: audioContext.sampleRate,
          tracks: buffers.map((buffer, index) => ({
            title: urlsAndTrackNames[index][1],
            height: expandedTrackHeight,
            audioBuffers: [buffer]
          }))
        }
      );
    },
    [project]
  );
  const [uploadModalVisible, setUploadModalVisible] = useState(false);

  const screenConfiguration = useContext(ScreenConfigurationContext);
  const commandEditor = useContext(CommandEditorContext);
  const walkthrough = useContext(WalkthroughContext);

  const showGenerators = useCallback(() => {
    commandEditor.focusCommand(null);
    screenConfiguration.setCommandViewHeight(75);
    screenConfiguration.setLibraryFilterState(CommandCategory.Generator);
  }, [screenConfiguration, commandEditor]);

  return (
    <Wrapper>
      {uploadModalVisible && (
        <Modal>
          <ModalTitle>
            Try dragging &amp; dropping your file(s) instead.
          </ModalTitle>
          <ModalBody>
            Well.. this is awkward. That upload button doesn't actually do anything yet.
          </ModalBody>
          <ModalBody>
            However, you CAN drag and drop audio files to load them up. Have fun!
          </ModalBody>
          <ModalButton onClick={() => setUploadModalVisible(false)}>Jeez, okay.</ModalButton>
        </Modal>
      )}
      <Content>
        <Interface>
          <Title>A Brand New WavTool is Coming December 1st</Title>
          <Title>With real-time processing, live coding, MIDI, and much more</Title>
          <SectionTitle>Start something new</SectionTitle>
          <ButtonWrap>
            <WelcomeButton secondary={walkthrough.currentWalkthroughStep === WalkthroughStep.PickTheSong} onClick={showGenerators}>
              <GeneratorIcon />
              Generate Audio
            </WelcomeButton>
            <WelcomeButton secondary onClick={startRecording}>
              <RecordIconWrap>
                <RecordIcon />
              </RecordIconWrap>
              Start Recording
            </WelcomeButton>
            <WelcomeButton secondary onClick={() => setUploadModalVisible(true)}>
              <UploadIcon />
              Upload Audio
            </WelcomeButton>
          </ButtonWrap>
          <SectionTitle>Load a demo project</SectionTitle>
          <ProjectWrap>
            <ProjectButton
              onClick={() => loadDemoProject([
                [require('../../demoProjects/GuitarBassDrums/ShortDrums.wav'), 'Drums']
              ])}
              emphasize={walkthrough.currentWalkthroughStep === WalkthroughStep.PickTheSong}
            >
              <ProjectButtonTitle>Drums</ProjectButtonTitle>
              <ProjectButtonDescription>1 track (stereo), 3s</ProjectButtonDescription>
            </ProjectButton>
          </ProjectWrap>
        </Interface>
        <SpeakerWrap>
          <Speaker />
        </SpeakerWrap>
      </Content>
    </Wrapper>
  )
}