Untitled

import { Box, Flex, Text } from "@chakra-ui/react";
import { PodMeColor } from "@typings/index";
import strings from "@locale/localization";
import { MouseEvent, ReactElement, useEffect, useRef, useState } from "react";
import Skeleton from "@components/Skeleton";
import { useMedia } from "app/hooks";

interface EpisodeBodyProps {
    description: string;
    isLoading: boolean;
    bindScroll: () => { [x: string]: unknown } | void;
}

export default function EpisodeBody({ description, isLoading, bindScroll }: EpisodeBodyProps): ReactElement {
    const string = strings.episodeHome;
    const { isSmallScreen } = useMedia();
    const DESC_BOX_MAX_SIZE = isSmallScreen ? 240 : 144;

    const [isDescriptionTooLong, setIsDescriptionTooLong] = useState<boolean>(false);
    const [isExpanded, setIsExpanded] = useState<boolean>(false);

    const textBoxRef = useRef<HTMLParagraphElement>(null);

    const handleDescriptionExpand = (e: MouseEvent) => {
        e.preventDefault();

        setIsExpanded((state) => !state);
    };

    const refLoaded = () => !!textBoxRef.current;

    useEffect(() => {
        if (textBoxRef.current && textBoxRef.current?.clientHeight > DESC_BOX_MAX_SIZE) setIsDescriptionTooLong(() => true);
        else setIsDescriptionTooLong(() => false);
    }, [textBoxRef.current, description.length]);

    return (
        <>
            <Flex direction="column" padding={isDescriptionTooLong ? "1.5rem 1.5rem 0" : "1.5rem"}>
                <Flex paddingBottom="0.5rem">
                    <Skeleton isLoaded={!isLoading} borderRadius="0.5rem">
                        <Text fontWeight="700" color={PodMeColor.SoftWhite}>
                            {string.aboutEpisode}
                        </Text>
                    </Skeleton>
                </Flex>
                {description.trim().length > 0 && (
                    <Flex
                        direction="column"
                        fontSize="min(5vw, 1rem)"
                        gridGap="0.5rem"
                        paddingBottom={isDescriptionTooLong ? "0.5rem !important" : "1.5rem !important"}
                        overflowY="auto"
                        height={DESC_BOX_MAX_SIZE}
                        transition="height 150ms ease-in"
                        {...bindScroll()}
                        css={{
                            "&::-webkit-scrollbar": {
                                width: "0.5rem",
                                transition: "all 150ms ease-in",
                            },

                            "&::-webkit-scrollbar-track": {
                                boxShadow: `inset 0 0 6px ${PodMeColor.BlackPearl}30`,
                            },

                            "&::-webkit-scrollbar-thumb": {
                                backgroundColor: PodMeColor.LicoriceBlue,
                                borderRadius: "0.75rem",
                            },

                            "&::-webkit-scrollbar-thumb:hover": {
                                backgroundColor: PodMeColor.LicoriceBlue + "80",
                            },
                        }}
                    >
                        <Skeleton isLoaded={!isLoading} height="100%" borderRadius="0.5rem">
                            <Text
                                ref={textBoxRef}
                                color={PodMeColor.Silver}
                                wordBreak="break-word"
                                noOfLines={
                                    !isDescriptionTooLong || !refLoaded() || isExpanded || typeof window === "undefined"
                                        ? undefined
                                        : [10, 6]
                                }
                            >
                                {description}
                            </Text>
                        </Skeleton>
                    </Flex>
                )}
            </Flex>

            {isDescriptionTooLong && refLoaded() ? (
                <Flex padding={["0.75rem 1.5rem", "1rem 1.5rem"]} marginBottom="1rem">
                    <Skeleton isLoaded={!isLoading} height="100%" minHeight="1.5rem" minWidth="5rem" borderRadius="0.5rem">
                        <Box
                            as="button"
                            role="button"
                            onClick={handleDescriptionExpand}
                            color={PodMeColor.Silver}
                            background="none"
                            fontSize="0.8rem"
                            fontWeight="600"
                            padding="0"
                            height="fit-content"
                            _focus={{
                                boxShadow: "none",
                                background: "none",
                            }}
                            _active={{
                                boxShadow: "none",
                                background: "none",
                            }}
                            _hover={{
                                color: PodMeColor.SoftWhite,
                                boxShadow: "none",
                                background: "none",
                            }}
                        >
                            {isExpanded ? string.readLess : string.readMore}
                        </Box>
                    </Skeleton>
                </Flex>
            ) : null}
        </>
    );
}