import styled from "styled-components";
import {TextInput} from "../components/TextInput";
import {useState} from "react";
import CelebrationCanvas from "./CelebrationCanvas";
import {createPortal} from "react-dom";
import {subscribeOnFinish} from "../../api/promoApi";

export const FinishPopupContent = ({setShowCompletePopup}: any) => {
    const [email, setEmail] = useState<string>("");
    const [buttonContent, setButtonContent] = useState<string>("Получить подарок");

    return <FinishPopupContentWrap>
        <img src="/images/broc-gifts.png" alt=""/>
        <h2>Спасибо!</h2>
        <p>
            Вы помогли нам протестировать автокорзину. Сейчас сервис ещё разрабатывается, поэтому оформить заказ пока не получится.
        </p>
        <p>
            Если вы оставите адрес электронной почты - после запуска мы подарим вам <strong>3 бесплатные корзины</strong>.
        </p>
        <TextInput placeholder={'Почта'} value={email} onChange={setEmail} />
        <FinishButton onClick={() => {
            if (buttonContent === 'Получить подарок') {
                setButtonContent('...')
                subscribeOnFinish(email).then((data) => {
                    // @ts-ignore
                    if (data && data.status === 200) {
                        setButtonContent('Письмо отправлено')
                    } else {
                        setButtonContent('Возникла ошибка')
                    }
                }).catch(() => {
                    setButtonContent('Возникла ошибка')
                })
            }
        }}>{buttonContent}</FinishButton>
        {createPortal(<CelebrationCanvas duration={5000} particleCount={300} />, document.body)}
    </FinishPopupContentWrap>;
};

const FinishPopupContentWrap = styled.div`
    padding: 20px;
    display: flex;
    flex-direction: column;
    
    img {
        max-width: 100%;
        display: flex;
    }
    h2 {
        margin-top: 24px;
        margin-bottom: 8px;
        font-size: 32px;
        line-height: 48px;
        font-weight: 450;
        text-align: center;
    }
    p {
        font-size: 16px;
        line-height: 19px;
        font-weight: 360;
        text-align: center;
        margin-bottom: 24px;
    }
`;
const FinishButton = styled.button`
    background-color: ${({ theme }) => theme.colors.green};
    height: 54px;
    width: 100%;
    color: #ffffff;
    border: none;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 370;
    line-height: 20px;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 16px;

    &:hover,
    &:focus {
        background-color: ${({ theme }) => theme.colors.greenHover};
    }

    &:active {
        background-color: #4A8D19;
    }
`;