import styled from 'styled-components';
import { createPortal } from 'react-dom';
import { CopyLink, Facebook, Line } from '../../components/Icons';

export function shareToFB(url = window.location.href, content = "") {
    if (typeof url !== "string") url = window.location.href;
    let link =
        "https://www.facebook.com/share.php?u=" +
        encodeURIComponent(url) +
        (content ? `&quote=${encodeURIComponent(content)}` : "");
    window.open(link);
    return false;
}

export function shareToLine(url = window.location.href, content = "") {
    if (typeof url !== "string") url = window.location.href;
    let link = `http://line.naver.jp/R/msg/text/?${
        content ? encodeURIComponent(content) + "%0D%0A%0D%0A" : ""
    }${encodeURIComponent(url)}`;
    // let link = 'https://social-plugins.line.me/lineit/share?url=' + encodeURIComponent(url) + (content ? `&text=${encodeURIComponent(content)}` : '');
    window.open(link);
    return false;
}

export function copyLink(url = window.location.href) {
    if (typeof url !== "string") url = window.location.href;
    var temp = document.createElement("input");
    document.querySelector("body")?.append(temp);
    temp.value = url;
    temp.select();
    document.execCommand("copy");
    temp.remove();
    alert("連結已複製");
}

function ShareTitleModal({ isOpen, shareUrl, onClose }) {
    
    if (!isOpen) return null;

    return createPortal(
        <StyledContainer>
            <ModalContent>
                <div className="title">
                    <h4>分享測驗連結</h4>
                    <button onClick={onClose}>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                        >
                            <path
                                d="M14.1211 11.9998L18.0001 8.11682C18.2519 7.83058 18.3853 7.45918 18.3731 7.07811C18.361 6.69705 18.2042 6.33491 17.9346 6.06532C17.665 5.79573 17.3028 5.63891 16.9218 5.62674C16.5407 5.61458 16.1693 5.74797 15.8831 5.99982L12.0001 9.87882L8.11006 5.98782C7.97073 5.84849 7.80532 5.73796 7.62327 5.66256C7.44122 5.58715 7.24611 5.54834 7.04906 5.54834C6.85202 5.54834 6.6569 5.58715 6.47485 5.66256C6.29281 5.73796 6.12739 5.84849 5.98806 5.98782C5.84873 6.12715 5.7382 6.29256 5.6628 6.47461C5.58739 6.65666 5.54858 6.85177 5.54858 7.04882C5.54858 7.24587 5.58739 7.44098 5.6628 7.62303C5.7382 7.80508 5.84873 7.97049 5.98806 8.10982L9.87906 11.9998L6.00006 15.8818C5.84793 16.0178 5.72515 16.1834 5.63923 16.3685C5.5533 16.5536 5.50604 16.7542 5.50033 16.9582C5.49462 17.1621 5.53059 17.3651 5.60603 17.5547C5.68147 17.7443 5.7948 17.9165 5.93908 18.0608C6.08336 18.2051 6.25557 18.3184 6.44516 18.3939C6.63475 18.4693 6.83774 18.5053 7.0417 18.4996C7.24567 18.4938 7.44633 18.4466 7.6314 18.3607C7.81648 18.2747 7.98207 18.1519 8.11806 17.9998L12.0001 14.1208L15.8781 17.9998C16.1595 18.2812 16.5411 18.4393 16.9391 18.4393C17.337 18.4393 17.7187 18.2812 18.0001 17.9998C18.2815 17.7184 18.4395 17.3368 18.4395 16.9388C18.4395 16.5409 18.2815 16.1592 18.0001 15.8778L14.1211 11.9998Z"
                                fill="white"
                            />
                        </svg>
                    </button>
                </div>
                <div className="share-buttons">
                    <button onClick={() => copyLink(shareUrl)}>
                        <CopyLink />複製分享連結
                    </button>
                    <button onClick={() => shareToFB(shareUrl)}>
                        <Facebook />分享至 Facebook
                    </button>
                    <button onClick={() => shareToLine(shareUrl)}>
                        <Line />分享至 Line
                    </button>
                </div>
            </ModalContent>
        </StyledContainer>,
        document.getElementById("modal")
    );
}

const StyledContainer = styled.div`
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 223, 90, 0.70);
    z-index: 1000;
`;

const ModalContent = styled.div`
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 272px;
    height: fit-content;
    box-shadow: 8px 9px 4px 0px rgba(0, 0, 0, 0.25);

    border-radius: 16px;
    background: var(--main-color-e);

    padding: 24px;

    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 32px;
    }

    h4 {
        font: var(--headline-6);
        color: var(--main-color-a);
        color: var(--main-color-a);
    }

    .share-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;

        button {
            width: 100%;
            padding: 8px 12px;
            border-radius: var(--radius-mm, 12px);
            background: var(--Neutrals-000, #FFF);
            color: var(--neutrals-700);
            font: var(--paragraph-2);

            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            font-weight: 700;
        }
    }

    
`;

export default ShareTitleModal;