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>
            Вы помогли нам протестировать автокорзину. Сейчас сервис ещё разрабатывается, поэтому оформить заказ
            пока нельзя. Оставьте адрес электронной почты, и после запуска мы подарим вам <b>3 бесплатные корзины</b>
        </p>
        <TextInput placeholder={'Почта'} value={email} onChange={setEmail}/>
        <Confirm>
            <label>
                <input type="checkbox"/> <span>Даю согласие на обработку персональных данных в соответствии <br/> с <a
                href="https://hvatilo.ru/land/cookies_and_recommendations.html" target="_blank">политикой
                конфиденциальности</a></span>
            </label>
        </Confirm>
        <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 Confirm = styled.div`
    font-size: 12px;
    color: ${({theme}) => theme.colors.gray};
    flex-direction: row;
    margin-top: 16px;
    * {
        color: inherit;
    }
    input {
        width: 11px;
        margin-right: 5px;
        accent-color: #4A8D19;
    }
    label {
        align-self: center;
        margin-bottom: 16px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: nowrap;
    }
    
`;
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;
    }
`;