import styled, { keyframes } from "styled-components";
import { createPortal } from "react-dom";
import { RemoveFromCart } from "../../../components/Icons";
import padZero from "../../../utils/padZero";
import { useState, useEffect } from "react";
import BorderShadowButton, { THEMES } from "../../../components/BorderShadowButton";
import { ImageWrapper } from "../../../components/MediaWrapper";
import getPathPrefix from "../../../utils/getPathPrefix";
import { respondTo } from "../../../utils/responsive";

function CardModal({ isOpen, onClose, items }) {
    const [cartItems, setCartItems] = useState(items);

    const removeItem = (id) => {
        setCartItems(cartItems.filter((item) => item.id !== id));
    };

    const handleClose = () => {
        onClose(cartItems);
    }

    useEffect(() => {
        setCartItems(items);
    }, [items]);

    useEffect(() => {
        if (isOpen) {
            document.getElementById("frame-container").style.overflow =
                "hidden";
        } else {
            document.getElementById("frame-container").style.overflow =
                "visible";
        }

        return () => {
            document.getElementById("frame-container").style.overflow =
                "visible";
        };
    }, [isOpen]);

    if (!isOpen) return null;

    return createPortal(
       <StyledContainer>
            <ModalContent>
                <Content>
                    <h3>購物車</h3>
                    {
                        cartItems?.length > 0 ? (
                            <Basket>
                        {cartItems.map((item) => (
                            <Card key={item.id}>
                                <div className="card-panel">
                                    <div className="number">{padZero(item.number)}</div>
                                    <button className="remove" onClick={() => removeItem(item.id)}>
                                        <RemoveFromCart />
                                    </button>
                                </div>
                                <ImageWrapper src={item.image} alt={item.title} />
                                <h4>{item.title}</h4>
                                <p>{item.description}</p>
                            </Card>
                        ))}
                            </Basket>
                        ) : <Empty>購物車空空的</Empty>
                    }
                    <BorderShadowButton className="close-btn" text="繼續購物" theme={THEMES.DARK} size="s" onClick={handleClose} />
                </Content>
            </ModalContent>
       </StyledContainer>,
        document.getElementById("modal-root")
    );
}

const handAnimation = keyframes`
    0% {
        opacity: 0;
        transform: translate(0, 10%);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
`;

const handAnimationMobile = keyframes`
    0% {
        opacity: 0;
        transform: translate(-50%, -40%);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
`;

const StyledContainer = styled.div`
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    z-index: 100;
`;

const ModalContent = styled.div`
    position: absolute;
    inset: 0;
    background-image: url(${getPathPrefix("/images/game/chapter2/cart-bg.png")});
    background-size: cover;
    background-position: center;
    animation: ${handAnimation} 0.4s ease-out 1;

    ${respondTo.sm} {
        background-image: url(${getPathPrefix("/images/game/chapter2/cart-bg-m.png")});

        width: 317px;
        height: 518px;
        left: 50%;
        top: 60%;
        transform: translate(-50%, -50%);

        animation: ${handAnimationMobile} 0.4s ease-out 1;
    }
`;

const Content = styled.div`
    position: absolute;
    width: 560px;
    height: 400px;

    left: 50%;
    top: 66px;
    transform: translateX(-50%);

    ${respondTo.sm} {
        width: calc(100% - 64px);
        height: calc(100% - 120px);
        top: 80px;
    }

    h3 {
        background-image: url(${getPathPrefix('/images/game/chapter2/cart-title.svg')});
        width: 130px;
        height: 40px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        
        text-indent: -9999px;
        overflow: hidden;
        margin: 0 auto;
        margin-bottom: 24px;

        ${respondTo.sm} {
            background-image: url(${getPathPrefix('/images/game/chapter2/cart-title-m.svg')});
            width: 105px;
            height: 32px;
        }

        
    }

    .close-btn {
        cursor: none;
        margin: 0 auto;
        margin-top: 28px;

        box-shadow: none;
    }
`;

const Empty = styled.div`
    width: 100%;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;

    font: var(--headline-5);
    color: var(--neutrals-700);
`;

const Basket = styled.div`
    width: 100%;
    height: 240px;
    overflow-y: scroll;

    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, 1fr);

    ${respondTo.sm} {
        grid-template-columns: repeat(2, 1fr);
        height: 260px;
        gap: 8px 4px;
    }
`;

const Card = styled.div`
    width: 130px;
    height: 160px;
    position: relative;

    padding: 14px;
    padding-top: 29px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--neutrals-700);

    isolation: isolate;

    ${respondTo.sm} {
        width: 122px;
        height: 158px;
    }

    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(${getPathPrefix('/images/game/chapter2/selected-item-frame.svg')});
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        pointer-events: none;

        ${respondTo.sm} {
            background: url(${getPathPrefix('/images/game/chapter2/selected-item-frame-m.svg')});
        }
    }

    .card-panel {
        display: flex;
        justify-content: space-between;
        align-items: center;

        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        .number {
            font-family: "Bungee", sans-serif;
            font-size: 16px;
            font-weight: 400;
            line-height: 120%; /* 19.2px */
            background: var(--neutrals-700);
            color: white;
            width: 56px;
            height: 32px;

            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12px 0px 16px 0px;

            ${respondTo.sm} {
                font-size: 14px;
            }
        }

        .remove {
            border-radius: 0px 12px 0px 16px;
            background: #ff6f2c;

            width: 32px;
            height: 32px;
            color: white;

            display: flex;
            justify-content: center;
            align-items: center;

            ${respondTo.sm} {
                svg {
                    height: 14px;
                }
            }
        }
    }

    img {
        --size: 50px;
        width: var(--size);
        height: var(--size);
        object-fit: cover;
        margin: 0 auto;
        margin-bottom: 4px;
    }

    h4 {
        font: var(--small-text-1);
        font-weight: 700;

        ${respondTo.sm} {
            font: var(--mobile-small-text-1);
            font-weight: 700;
        }
    }

    p {
        font: var(--small-text-2);
        text-align: center;

        ${respondTo.sm} {
            font: var(--mobile-small-text-1);
        }
    }
`;

export default CardModal;
