import { darkLine } from '@/styles/colors';
import {
  BELOW_W_1024,
  BELOW_W_1280,
  NOT_BELOW_W_1024,
  contentBelowHeaderHeight,
  paddedMainContentWidth,
} from '@/styles/dimensions';
import styled from '@emotion/styled';

import { useRef } from 'react';
import { EvenColumns, VerticalBlock, WhiteBackgroundPaddedBlockCSS } from './Layout';
import { Body, Bracketed, FeatureTitle, Subtitle } from './Typography';

const GridStack = styled.div`
  position: relative;
  height: ${contentBelowHeaderHeight};
  z-index: 2;
  @media screen and (${NOT_BELOW_W_1024}) {
    .only-mobile {
      display: none;
    }
  }
  @media screen and (${BELOW_W_1024}) {
    height: auto;
    .not-mobile {
      display: none;
    }
  }
`;

const GridWrapper = styled.div`
  background-color: white;
  border-bottom: 1px solid ${darkLine};
  @media screen and (${NOT_BELOW_W_1024}) {
    height: ${contentBelowHeaderHeight};
    display: grid;
    grid-template-rows: 4.8rem 9.6rem auto;
    grid-template-columns: 14.4rem auto;
    > div {
      height: 100%;
      width: 100%;
      border-bottom: 1px solid ${darkLine};
      border-right: 1px solid ${darkLine};
    }
  }
  @media screen and (${BELOW_W_1024}) {
    ${WhiteBackgroundPaddedBlockCSS};
    margin: 0;
    padding: 48px;
    position: relative;
    z-index: 2;
    margin-bottom: 0;
  }
`;

const MobileImageContainer = styled.div`
  position: relative;
  height: 80svh;
  min-height: calc(${paddedMainContentWidth} * 0.75);
  overflow-y: visible;
  background-size: cover;
  background-position: 50% 50%;
`;

const FeatureShowcaseLabel = styled.div`
  padding: 12px;
  @media screen and (${BELOW_W_1024}) {
    padding: 0;
  }
`;

const FeaturesShowcaseContent = styled.div`
  padding: 2.4rem;
  @media screen and (${BELOW_W_1024}) {
    padding: 0;
  }
`;

const TextWrap = styled.div`
  padding: 4.8rem;
  @media screen and (${BELOW_W_1024}) {
    padding: 0;
  }
`;

const FeatureShowcaseTitle = styled(FeatureTitle)`
  scroll-margin-top: 6rem;
  background-image: none;
  @media screen and (${NOT_BELOW_W_1024}) {
    line-height: 1;
    margin-top: -0.4rem;
    display: block;
    font-size: 4.8rem;
  }
  @media screen and (${BELOW_W_1280}) and (${NOT_BELOW_W_1024}) {
    margin-top: -1.2rem;
    font-size: 4rem;
  }
`;

const ImgStack = styled.div`
  position: relative;
  display: grid;
  grid-template-rows: repeat(auto-fill, 1fr);
  @media screen and (${BELOW_W_1024}) {
    display: none;
  }
`;

const ImgContainer = styled.div`
  height: ${contentBelowHeaderHeight};
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  border-bottom: 1px solid ${darkLine};
  padding: 48px;
  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
`;

const FeatureShowcaseEvenColumns = styled(EvenColumns)`
  @media screen and (${BELOW_W_1024}) {
    display: block;
  }
`;

const ResponiveContentWrapper = styled.div`
  display: contents;
  @media screen and (${BELOW_W_1024}) {
    display: block;
    background-color: #f8f8f8;
    border-bottom: 1px solid ${darkLine};
  }
`;

const FeatureShowcaseBody = styled(Body)`
  margin-top: 1.2rem;
`;

const FeatureShowcaseGrid = ({
  contents,
}: {
  contents: {
    title: string;
    id?: string;
    subtitle: string;
    body: React.ReactNode[] | React.ReactNode;
    screencap: React.ReactNode;
    mobileScreencap: React.ReactNode;
    image: React.ReactNode;
    mobileImage: React.ReactNode;
  }[];
}) => {
  const wrapperRef = useRef<HTMLDivElement>(null);
  return (
    <VerticalBlock>
      <FeatureShowcaseEvenColumns ref={wrapperRef}>
        <GridStack className="pinned-part">
          {contents.map((c, i) => (
            <ResponiveContentWrapper key={i}>
              <MobileImageContainer className="only-mobile">{c.mobileImage}</MobileImageContainer>
              <GridWrapper key={i} data-index={i}>
                <FeatureShowcaseLabel style={{ gridArea: '1 / 1 / 2 / 2' }}>
                  <Subtitle>
                    <span className="only-mobile">{c.subtitle}</span>
                    <Bracketed className="not-mobile">Features</Bracketed>
                  </Subtitle>
                </FeatureShowcaseLabel>
                <div style={{ gridArea: '1 / 2 / 2 / 3' }}></div>
                <FeatureShowcaseLabel style={{ gridArea: '2 / 1 / 3 / 2' }}>
                  <Subtitle>
                    <Bracketed className="not-mobile animated-number">{i + 1}</Bracketed>
                  </Subtitle>
                </FeatureShowcaseLabel>
                <FeaturesShowcaseContent style={{ gridArea: '2 / 2 / 3 / 3' }}>
                  <FeatureShowcaseTitle className="animated-title" id={c.id}>
                    {c.title}
                  </FeatureShowcaseTitle>
                </FeaturesShowcaseContent>
                <div style={{ gridArea: '3 / 1 / 4 / 2', borderBottom: 'none' }}></div>
                <FeaturesShowcaseContent
                  style={{
                    gridArea: '3 / 2 / 4 / 3',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    borderBottom: 'none',
                    padding: 0,
                  }}
                >
                  {c.screencap}
                  <TextWrap>
                    <Subtitle className="animated-subtitle not-mobile">{c.subtitle}</Subtitle>
                    <FeatureShowcaseBody className="animated-body">{c.body}</FeatureShowcaseBody>
                  </TextWrap>
                  {c.mobileScreencap}
                </FeaturesShowcaseContent>
              </GridWrapper>
            </ResponiveContentWrapper>
          ))}
        </GridStack>
        <ImgStack>
          {contents.map((c, i) => (
            <ImgContainer key={i}>{c.image}</ImgContainer>
          ))}
        </ImgStack>
      </FeatureShowcaseEvenColumns>
    </VerticalBlock>
  );
};

export default FeatureShowcaseGrid;