feishin/src/renderer/features/albums/components/album-detail-header.tsx

import { Center, Group } from '@mantine/core';
import { useMergedRef } from '@mantine/hooks';
import { forwardRef, Fragment, Ref } from 'react';
import { RiAlbumFill } from 'react-icons/ri';
import { generatePath, useParams } from 'react-router';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { Text, TextTitle } from '/@/renderer/components';
import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
import { useContainerQuery } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes';

const HeaderContainer = styled.div`
  position: relative;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-areas: 'image info';
  grid-template-rows: 1fr;
  grid-template-columns: 250px 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.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 AlbumDetailHeaderProps {
  background: string;
}

export const AlbumDetailHeader = forwardRef(
  ({ background }: AlbumDetailHeaderProps, ref: Ref<HTMLDivElement>) => {
    const { albumId } = useParams() as { albumId: string };
    const detailQuery = useAlbumDetail({ id: albumId });
    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';

    return (
      <HeaderContainer ref={mergedRef}>
        <BackgroundImage background={background} />
        <BackgroundImageOverlay />
        <CoverImageWrapper>
          {detailQuery?.data?.imageUrl ? (
            <StyledImage
              alt="cover"
              height={225}
              src={detailQuery?.data.imageUrl}
              width={225}
            />
          ) : (
            <Center
              sx={{
                background: 'var(--placeholder-bg)',
                borderRadius: 'var(--card-default-radius)',
                height: `${225}px`,
                width: `${225}px`,
              }}
            >
              <RiAlbumFill
                color="var(--placeholder-fg)"
                size={35}
              />
            </Center>
          )}
        </CoverImageWrapper>
        <MetadataWrapper>
          <Group>
            <Text
              $link
              component={Link}
              fw="600"
              sx={{ textTransform: 'uppercase' }}
              to={AppRoute.LIBRARY_ALBUMS}
            >
              Album
            </Text>
            {detailQuery?.data?.releaseYear && (
              <>
                <Text>•</Text>
                <Text>{detailQuery?.data?.releaseYear}</Text>
              </>
            )}
          </Group>
          <TextTitle
            fw="900"
            lh="1"
            mb="0.12em"
            mt=".08em"
            sx={{ fontSize: titleSize }}
          >
            {detailQuery?.data?.name}
          </TextTitle>
          <Group
            spacing="xs"
            sx={{
              WebkitBoxOrient: 'vertical',
              WebkitLineClamp: 2,
              display: '-webkit-box',
              overflow: 'hidden',
            }}
          >
            {detailQuery?.data?.albumArtists.map((artist, index) => (
              <Fragment key={`artist-${artist.id}`}>
                {index > 0 && (
                  <Text
                    $noSelect
                    sx={{
                      display: 'inline-block',
                      padding: '0 0.5rem',
                    }}
                  >
                    •
                  </Text>
                )}
                <Text
                  $link
                  component={Link}
                  fw="600"
                  to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
                    albumArtistId: artist.id,
                  })}
                >
                  {artist.name}
                </Text>
              </Fragment>
            ))}
          </Group>
        </MetadataWrapper>
      </HeaderContainer>
    );
  },
);