import styled, { css } from "styled-components";
import TaskCard from "./TaskCard";
import getPathPrefix from "../../utils/getPathPrefix";
import { respondTo } from "../../utils/responsive";
import { useMediaSelectTo, breakpoints } from "../../utils/responsive";
import { useMemo, useState } from "react";

function TaskList({ title, tasks, isDoneList }) {
    const isMobile = useMediaSelectTo(breakpoints.sm)
    const [isFold, setIsFold] = useState(window.innerWidth < breakpoints.sm && tasks.length > 4)
    const isFoldable = useMemo(() => {
        if (!isMobile) return false
        return tasks.length > 4
    }, [tasks, isMobile])

    

    return (
        <StyledContainer $done={isDoneList} $isFold={isFold} $isFoldable={isFoldable}>
            <h4>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="114"
                    height="5"
                    viewBox="0 0 114 5"
                    fill="none"
                >
                    <path
                        d="M2 2.5H112"
                        stroke="#334155"
                        strokeWidth="4"
                        stroke-linecap="round"
                    />
                </svg>
                {title}
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="114"
                    height="5"
                    viewBox="0 0 114 5"
                    fill="none"
                >
                    <path
                        d="M2 2.5H112"
                        stroke="#334155"
                        strokeWidth="4"
                        stroke-linecap="round"
                    />
                </svg>
            </h4>
            <div className="list">
                {tasks.map((task) => (
                    <TaskCard key={task.id} {...task} />
                ))}
            </div>
            {isFoldable && (
                <div className="fold-button">
                    <button onClick={() => setIsFold(!isFold)}>
                        {isFold ? "點擊查看全部" : "收起"}
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="25"
                            height="24"
                            viewBox="0 0 25 24"
                            fill="none"
                        >
                            <path
                                d="M19.2098 8.20998C19.1169 8.11625 19.0063 8.04186 18.8844 7.99109C18.7625 7.94032 18.6318 7.91418 18.4998 7.91418C18.3678 7.91418 18.2371 7.94032 18.1152 7.99109C17.9934 8.04186 17.8828 8.11625 17.7898 8.20998L13.2098 12.79C13.1169 12.8837 13.0063 12.9581 12.8844 13.0089C12.7625 13.0596 12.6318 13.0858 12.4998 13.0858C12.3678 13.0858 12.2371 13.0596 12.1152 13.0089C11.9934 12.9581 11.8828 12.8837 11.7898 12.79L7.20982 8.20998C7.11685 8.11625 7.00625 8.04186 6.88439 7.99109C6.76253 7.94032 6.63183 7.91418 6.49982 7.91418C6.3678 7.91418 6.2371 7.94032 6.11524 7.99109C5.99338 8.04186 5.88278 8.11625 5.78982 8.20998C5.60356 8.39734 5.49902 8.6508 5.49902 8.91498C5.49902 9.17917 5.60356 9.43262 5.78982 9.61998L10.3798 14.21C10.9423 14.7718 11.7048 15.0873 12.4998 15.0873C13.2948 15.0873 14.0573 14.7718 14.6198 14.21L19.2098 9.61998C19.3961 9.43262 19.5006 9.17917 19.5006 8.91498C19.5006 8.6508 19.3961 8.39734 19.2098 8.20998Z"
                                fill="#334155"
                            />
                        </svg>
                    </button>
                </div>
            )}
        </StyledContainer>
    );
}

const StyledContainer = styled.div`
    border-radius: 50px;
    border: 6px solid var(--neutrals-700);
    padding: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;

    background-size: 100% auto;
    background-repeat: repeat;

    background-image: url(${getPathPrefix("/images/result/miss.jpg")});
    box-shadow: 8px 9px 4px 0px rgba(0, 0, 0, 0.25);

    position: relative;
    overflow: hidden;

    --fold-gradient: linear-gradient(
        0deg,
        #f80 0%,
        rgba(255, 136, 0, 0.8) 60%,
        rgba(255, 136, 0, 0) 100%
    );

    ${({ $isFold }) =>
        $isFold &&
        css`
            height: 700px;

            .fold-button {
                svg {
                    transform: rotate(0deg);
                }
            }
        `}

    ${({ $done }) =>
        $done &&
        css`
            background-image: url(${getPathPrefix("/images/result/done.jpg")});
            --fold-gradient: linear-gradient(
                0deg,
                #ffda3f 0%,
                rgba(255, 222, 81, 0.8) 60%,
                rgba(255, 238, 166, 0) 100%
            );
        `}

    ${respondTo.sm} {
        padding: 32px;

        ${({ $isFoldable }) =>
            $isFoldable &&
            css`
                padding-bottom: 100px;
            `}
    }

    .fold-button {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0%;
        height: 100px;
        z-index: 1;
        background: var(--fold-gradient);

        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 30px;

        button {
            font: var(--mobile-headline-5);
            color: var(--neutrals-700);

            display: flex;
            align-items: center;
            gap: 8px;

            svg {
                transform: rotate(180deg);
            }
        }
    }

    h4 {
        display: flex;
        gap: 24px;
        align-items: center;
        font: var(--headline-3);
        color: var(--neutrals-700);
        margin-bottom: 32px;

        ${respondTo.sm} {
            font: var(--mobile-headline-4);
            gap: 16px;
            margin-bottom: 20px;
        }
    }

    .list {
        display: grid;
        grid-template-columns: repeat(2, 350px);
        gap: 20px;

        ${respondTo.sm} {
            grid-template-columns: repeat(1, 1fr);
            gap: 10px;
        }
    }
`;

export default TaskList;