feishin/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx

import React, { MouseEvent, useState } from 'react';
import type { UnstyledButtonProps } from '@mantine/core';
import { RiPlayFill, RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
import styled from 'styled-components';
import { _Button } from '/@/renderer/components/button';
import type { PlayQueueAddOptions } from '/@/renderer/types';
import { Play } from '/@/renderer/types';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem } from '/@/renderer/api/types';
import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
import {
    ALBUM_CONTEXT_MENU_ITEMS,
    ARTIST_CONTEXT_MENU_ITEMS,
} from '/@/renderer/features/context-menu/context-menu-items';

type PlayButtonType = UnstyledButtonProps & React.ComponentPropsWithoutRef<'button'>;

const PlayButton = styled.button<PlayButtonType>`
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 50%;
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
    transition: scale 0.1s ease-in-out;

    &:hover {
        opacity: 1;
        scale: 1.1;
    }

    &:active {
        opacity: 1;
        scale: 1;
    }

    svg {
        fill: rgb(0, 0, 0);
        stroke: rgb(0, 0, 0);
    }
`;

const SecondaryButton = styled(_Button)`
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
    transition: scale 0.2s linear;

    &:hover {
        opacity: 1;
        scale: 1.1;
    }

    &:active {
        opacity: 1;
        scale: 1;
    }
`;

const GridCardControlsContainer = styled.div<{ $isFavorite?: boolean }>`
    position: absolute;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
`;

const FavoriteBanner = styled.div`
    position: absolute;
    top: -50px;
    left: -50px;
    width: 80px;
    height: 80px;
    background-color: var(--primary-color);
    box-shadow: 0 0 10px 8px rgba(0, 0, 0, 80%);
    transform: rotate(-45deg);
    content: '';
    pointer-events: none;
`;

const ControlsRow = styled.div`
    width: 100%;
    height: calc(100% / 3);
`;

const BottomControls = styled(ControlsRow)`
    position: absolute;
    bottom: 0;
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 1rem 0.5rem;
`;

const FavoriteWrapper = styled.span<{ isFavorite: boolean }>`
    svg {
        fill: ${(props) => props.isFavorite && 'var(--primary-color)'};
    }
`;

export const GridCardControls = ({
    itemData,
    itemType,
    handlePlayQueueAdd,
    handleFavorite,
}: {
    handleFavorite: (options: {
        id: string[];
        isFavorite: boolean;
        itemType: LibraryItem;
        serverId: string;
    }) => void;
    handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
    itemData: any;
    itemType: LibraryItem;
}) => {
    const [isFavorite, setIsFavorite] = useState(itemData?.userFavorite);
    const playButtonBehavior = usePlayButtonBehavior();

    const handlePlay = async (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
        e.preventDefault();
        e.stopPropagation();

        handlePlayQueueAdd?.({
            byItemType: {
                id: [itemData.id],
                type: itemType,
            },
            playType: playType || playButtonBehavior,
        });
    };

    const handleFavorites = async (e: MouseEvent<HTMLButtonElement>, serverId: string) => {
        e.preventDefault();
        e.stopPropagation();

        handleFavorite?.({
            id: [itemData.id],
            isFavorite: itemData.userFavorite,
            itemType,
            serverId,
        });

        setIsFavorite(!isFavorite);
    };

    const handleContextMenu = useHandleGeneralContextMenu(
        itemType,
        itemType === LibraryItem.ALBUM ? ALBUM_CONTEXT_MENU_ITEMS : ARTIST_CONTEXT_MENU_ITEMS,
    );

    return (
        <>
            {isFavorite ? <FavoriteBanner /> : null}
            <GridCardControlsContainer
                $isFavorite
                className="card-controls"
            >
                <PlayButton onClick={handlePlay}>
                    <RiPlayFill size={25} />
                </PlayButton>
                <BottomControls>
                    <SecondaryButton
                        p={5}
                        variant="subtle"
                        onClick={(e) => handleFavorites(e, itemData?.serverId)}
                    >
                        <FavoriteWrapper isFavorite={itemData?.isFavorite}>
                            {isFavorite ? (
                                <RiHeartFill size={20} />
                            ) : (
                                <RiHeartLine
                                    color="white"
                                    size={20}
                                />
                            )}
                        </FavoriteWrapper>
                    </SecondaryButton>
                    <SecondaryButton
                        p={5}
                        variant="subtle"
                        onClick={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            handleContextMenu(e, [itemData]);
                        }}
                    >
                        <RiMoreFill
                            color="white"
                            size={20}
                        />
                    </SecondaryButton>
                </BottomControls>
            </GridCardControlsContainer>
        </>
    );
};