import { Center, Group } from '@mantine/core';
import { useMergedRef } from '@mantine/hooks';
import { forwardRef, ReactNode, Ref } from 'react';
import { RiAlbumFill } from 'react-icons/ri';
import { Link } from 'react-router-dom';
import { SimpleImg } from 'react-simple-img';
import styled from 'styled-components';
import { LibraryItem } from '/@/renderer/api/types';
import { Text, TextTitle } from '/@/renderer/components';
import { useContainerQuery } from '/@/renderer/hooks';

const HeaderContainer = styled.div<{ imageSize: number }>`
  position: relative;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-areas: 'image info';
  grid-template-rows: 1fr;
  grid-template-columns: ${(props) => props.imageSize + 25}px minmax(0, 1fr);
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  height: 30vh;
  min-height: 340px;
  max-height: 500px;
  padding: 5rem 2rem 2rem;
`;

const CoverImageWrapper = styled.div`
  z-index: 15;
  display: flex;
  grid-area: image;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  filter: drop-shadow(0 0 8px rgb(0, 0, 0, 50%));
`;

const MetadataWrapper = styled.div`
  z-index: 15;
  display: flex;
  flex-direction: column;
  grid-area: info;
  justify-content: flex-end;
  width: 100%;
`;

const StyledImage = styled(SimpleImg)`
  img {
    object-fit: cover;
  }
`;

const BackgroundImage = styled.div<{ background: string }>`
  position: absolute;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: ${(props) => props.background};
`;

const BackgroundImageOverlay = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(25, 26, 28, 5%), var(--main-bg)), var(--background-noise);
`;

interface LibraryHeaderProps {
  background: string;
  children?: ReactNode;
  imagePlaceholderUrl?: string | null;
  imageUrl?: string | null;
  item: { route: string; type: LibraryItem };
  title: string;
}

export const LibraryHeader = forwardRef(
  (
    { imageUrl, imagePlaceholderUrl, background, title, item, children }: LibraryHeaderProps,
    ref: Ref<HTMLDivElement>,
  ) => {
    const cq = useContainerQuery();
    const mergedRef = useMergedRef(ref, cq.ref);
    const titleSize = cq.isXl
      ? '6rem'
      : cq.isLg
      ? '5.5rem'
      : cq.isMd
      ? '4.5rem'
      : cq.isSm
      ? '3.5rem'
      : '2rem';

    const imageSize = cq.isLg ? 225 : cq.isMd ? 200 : cq.isSm ? 175 : 150;

    return (
      <HeaderContainer
        ref={mergedRef}
        imageSize={imageSize}
      >
        <BackgroundImage background={background} />
        <BackgroundImageOverlay />
        <CoverImageWrapper>
          {imageUrl ? (
            <StyledImage
              alt="cover"
              height={imageSize}
              placeholder={imagePlaceholderUrl || 'var(--placeholder-bg)'}
              src={imageUrl}
              width={imageSize}
            />
          ) : (
            <Center
              sx={{
                background: 'var(--placeholder-bg)',
                borderRadius: 'var(--card-default-radius)',
                height: `${imageSize}px`,
                width: `${imageSize}px`,
              }}
            >
              <RiAlbumFill
                color="var(--placeholder-fg)"
                size={35}
              />
            </Center>
          )}
        </CoverImageWrapper>
        <MetadataWrapper>
          <Group>
            <Text
              $link
              component={Link}
              fw="600"
              sx={{ textTransform: 'uppercase' }}
              to={item.route}
            >
              {item.type}
            </Text>
          </Group>
          <TextTitle
            fw="900"
            lh="1.12"
            lineClamp={2}
            overflow="hidden"
            pb=".06em"
            sx={{ fontSize: titleSize, overflow: 'hidden' }}
          >
            {title}
          </TextTitle>
          {children}
        </MetadataWrapper>
      </HeaderContainer>
    );
  },
);
