import { ash, darkLine, lightLine } from '@/styles/colors';
import { BELOW_W_1024, BELOW_W_768 } from '@/styles/dimensions';
import styled from '@emotion/styled';
import { DetailedHTMLProps, HTMLAttributes } from 'react';
import { PaddedBlock, VerticalBlock } from './Layout';
import { Body, Subtitle, Title } from './Typography';
import AudioMidiRecording from './featurebreakdowns/AudioMidiRecording';
import AudioWarping from './featurebreakdowns/AudioWarping';
import ChainEditor from './featurebreakdowns/ChainEditor';
import CloudSaving from './featurebreakdowns/CloudSaving';
import MidiExport from './featurebreakdowns/MidiExport';
import PanelsAnimation from './featurebreakdowns/PanelsAnimation';
import PluginIntegration from './featurebreakdowns/PluginIntegration';
import SampleLibrary from './featurebreakdowns/SampleLibrary';

const SectionHeader = styled.div`
  max-width: 1000px;
  margin-top: 5rem;
  margin-bottom: 20rem;
  @media screen and (${BELOW_W_1024}) {
    margin-bottom: 10rem;
  }
  @media screen and (${BELOW_W_768}) {
    margin-bottom: 5rem;
  }
`;

const SectionSubtitle = styled(Subtitle)`
  background: ${lightLine};
  width: fit-content;
  padding: 3px;
`;

const SectionTitle = styled(Title)`
  text-transform: lowercase;
  background-image: none;
  font-size: 6rem;
  @media screen and (${BELOW_W_1024}) {
    font-size: 5.6rem;
  }
`;

const FeaturesListGrid = styled.div`
  width: 100%;
  height: 100%;
  display: grid;
  > div {
    height: 100%;
    width: 100%;
    border: 0.5px solid ${darkLine};
  }
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  @media screen and (${BELOW_W_1024}) {
    grid-template-columns: 1fr 1fr;
  }
  @media screen and (${BELOW_W_768}) {
    grid-template-columns: 1fr;
  }
`;

const ImageContainer = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-grow: 0;
  padding: 1.2rem;
  margin-bottom: 1.2rem;
`;

const ImagePlaceholder = styled.div`
  background: ${lightLine};
  width: 100%;
  height: 100%;
  min-height: 200px;
`;

const FeatureGridSubtitle = styled(Subtitle)`
  font-family: Montreal;
  font-weight: 100;
  font-size: 1.6rem;
  margin-bottom: 1rem;
`;

const FeatureGridBody = styled(Body)`
  font-family: Montreal;
  font-weight: 100;
  font-size: 1.3rem;
`;

interface FeatureGridItemProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
  gridArea: string;
}

const FeatureGridItemWrapper = styled.div<{ gridArea: string }>`
  position: relative;
  display: flex;
  flex-grow: 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  padding: 2.4rem;
  grid-area: ${({ gridArea }) => gridArea};
  @media screen and (${BELOW_W_1024}) {
    grid-area: auto;
  }
`;
const CORNER_SIZE = 5;
const CORNER_OFFSET = -3;
const FeatureGridItem = ({ children, style, gridArea }: FeatureGridItemProps) => {
  return (
    <FeatureGridItemWrapper style={style} gridArea={gridArea}>
      <div
        style={{
          position: 'absolute',
          height: CORNER_SIZE,
          width: CORNER_SIZE,
          top: CORNER_OFFSET,
          left: CORNER_OFFSET,
          background: darkLine,
        }}
      ></div>
      <div
        style={{
          position: 'absolute',
          height: CORNER_SIZE,
          width: CORNER_SIZE,
          top: CORNER_OFFSET,
          right: CORNER_OFFSET,
          background: darkLine,
        }}
      ></div>
      <div
        style={{
          position: 'absolute',
          height: CORNER_SIZE,
          width: CORNER_SIZE,
          bottom: CORNER_OFFSET,
          right: CORNER_OFFSET,
          background: darkLine,
        }}
      ></div>
      <div
        style={{
          position: 'absolute',
          height: CORNER_SIZE,
          width: CORNER_SIZE,
          bottom: CORNER_OFFSET,
          left: CORNER_OFFSET,
          background: darkLine,
        }}
      ></div>
      {children}
    </FeatureGridItemWrapper>
  );
};

const FeatureBreakdownGrid = () => {
  return (
    <VerticalBlock id="pro-daw-features">
      <PaddedBlock>
        <SectionHeader>
          <SectionSubtitle>A future built on strong foundations</SectionSubtitle>
          <SectionTitle>
            WavTool can do that,
            <span style={{ color: ash }}> bringing the full suite of pro-grade DAW features to your browser.</span>
          </SectionTitle>
        </SectionHeader>
      </PaddedBlock>
      <FeaturesListGrid>
        <FeatureGridItem gridArea="1 / 1 / 1 / 2">
          <ImageContainer>
            <AudioMidiRecording />
          </ImageContainer>
          <FeatureGridSubtitle>Audio and MIDI recording</FeatureGridSubtitle>
          <FeatureGridBody>Use your Audio Interfaces and MIDI controllers</FeatureGridBody>
        </FeatureGridItem>
        <FeatureGridItem gridArea="1 / 2 / 1 / 4">
          <ImageContainer>
            <MidiExport />
          </ImageContainer>
          <FeatureGridSubtitle>MIDI Export</FeatureGridSubtitle>
          <FeatureGridBody>Easy exports for any target DAW</FeatureGridBody>
        </FeatureGridItem>
        <FeatureGridItem gridArea="1 / 4 / 1 / 6">
          <ImageContainer>
            <SampleLibrary />
          </ImageContainer>
          <FeatureGridSubtitle>Sample Library</FeatureGridSubtitle>
          <FeatureGridBody>A growing directory of free samples and loops.</FeatureGridBody>
        </FeatureGridItem>
        <FeatureGridItem gridArea="2 / 1 / 4 / 3">
          <ImageContainer>
            <ChainEditor />
          </ImageContainer>
          <FeatureGridSubtitle>Chain Editor</FeatureGridSubtitle>
          <FeatureGridBody>
            Part modular synth, part recording studio. This is how plugins want to connect.
          </FeatureGridBody>
        </FeatureGridItem>
        <FeatureGridItem gridArea="2 / 3 / 3 / 6">
          <ImageContainer>
            <AudioWarping />
          </ImageContainer>
          <FeatureGridSubtitle>Audio Warping</FeatureGridSubtitle>
          <FeatureGridBody>Automatically (or manually) timestretch and grid-align any audio</FeatureGridBody>
        </FeatureGridItem>
        <FeatureGridItem gridArea="3 / 3 / 4 / 6">
          <ImageContainer>
            <CloudSaving />
          </ImageContainer>
          <FeatureGridSubtitle>Cloud Saving</FeatureGridSubtitle>
          <FeatureGridBody>Access all of your projects on any machine</FeatureGridBody>
        </FeatureGridItem>
        <FeatureGridItem gridArea="4 / 1 / 4 / 2">
          <ImageContainer>
            <PanelsAnimation />
          </ImageContainer>
          <FeatureGridSubtitle>Flexible panel-based UI</FeatureGridSubtitle>
          <FeatureGridBody>Work the way you want, with fully customizable editor layouts</FeatureGridBody>
        </FeatureGridItem>
        <FeatureGridItem gridArea="4 / 2 / 4 / 6">
          <ImageContainer>
            <PluginIntegration />
          </ImageContainer>
          <FeatureGridSubtitle>VST & AU Plugins</FeatureGridSubtitle>
          <FeatureGridBody>Top-tier support for all of your favourite plugins.</FeatureGridBody>
        </FeatureGridItem>
      </FeaturesListGrid>
    </VerticalBlock>
  );
};

export default FeatureBreakdownGrid;