import styled, { withTheme } from "styled-components/macro";

import { bgVector1 } from "./Static/bgVector1";
import { bgVector2 } from "./Static/bgVector2";
import { rightArrowVector } from "./Static/rightArrowVector";
import { ultimathLogoVector } from "./Static/ultimathLogoVector";
import InputFieldLight from "../../Components/InputFieldLight/InputFieldLight";

const RegistrationFormWrapper = styled.section`
    min-height: 100vh;
    display: flex;

    & > aside {
        width: 40%;
        background-color: #005840;
        position: relative;

        & > .bg-vector-1 {
            position: absolute;
            top: 0;
            left: 0;
        }

        & > .bg-vector-2 {
            position: absolute;
            bottom: 0;
            right: 0;
        }

        & > .ultimath-logo-vector {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 280px;
        }
    }

    & > main {
        background-color: #f4f1ea;
        width: 60%;
        display: flex;
        justify-content: center;
        align-items: center;

        .title {
            color: #020202;
            font-size: 29px;
            font-style: normal;
            font-weight: 600;
            line-height: 40px;
            margin-bottom: 80px;
        }
    }

    #registration-form {
        width: 570px;

        & > button {
            border: none;
            border-radius: 6px;
            width: 100%;
            padding: 10px;
            cursor: pointer;
            background-color: #005840;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px;

            & > span {
                color: #cdf545;
                font-family: Inter;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 16px;
                text-transform: uppercase;
            }
        }

        .input-group {
            display: flex;
            gap: 16px;

            & > * {
                width: 50%;
            }

            & > .school-input-container {
                width: 75%;
            }

            & > .year-input-container {
                width: 25%;
            }
        }

        .agree-checkbox-container {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 88px;
            margin-bottom: 16px;

            & > input {
                width: 24px;
            }

            & > p {
                font-size: 14px;
                color: #2D2E34;
            }

            & a {
                color: #005840;
                text-decoration-line: underline;
            }
        }
    }
`;

const RegistrationForm = () => {
    const apply = (e) => {
        e.preventDefault();
        console.log("applied");
    };

    return (
        <RegistrationFormWrapper>
            <aside>
                {bgVector1}
                {bgVector2}
                {ultimathLogoVector}
            </aside>
            <main>
                <div>
                    <h1 className="title">Наслов</h1>
                    <form onSubmit={(e) => apply(e)} id="registration-form">
                        <InputFieldLight
                            type="text"
                            required
                            name="name"
                            //   onChange={() =>
                            //
                            //   }
                            label={"Име"}
                            placeholder={"Внеси име"}
                            //   value={}
                            className="name-input-container"
                            //   errors={}
                        />

                        <div className="input-group">
                            <InputFieldLight
                                type="text"
                                required
                                name="name"
                                //   onChange={() =>
                                //
                                //   }
                                label={"Средно училиште"}
                                placeholder={"Внеси средно училиште"}
                                //   value={}
                                className="school-input-container"
                                //   errors={}
                            />

                            <InputFieldLight
                                type="text"
                                required
                                name="name"
                                //   onChange={() =>
                                //
                                //   }
                                label={"Година"}
                                placeholder={"0"}
                                //   value={}
                                className="year-input-container"
                                //   errors={}
                            />
                        </div>

                        <div className="input-group">
                            <InputFieldLight
                                type="text"
                                required
                                name="name"
                                //   onChange={() =>
                                //
                                //   }
                                label={"E-mail"}
                                placeholder={"example@example.com"}
                                //   value={}
                                className="email-input-container"
                                //   errors={}
                            />

                            <InputFieldLight
                                type="text"
                                required
                                name="name"
                                //   onChange={() =>
                                //
                                //   }
                                label={"Телефонски број"}
                                placeholder={"07X-XXX-XXX"}
                                //   value={}
                                className="phone-input-container"
                                //   errors={}
                            />
                        </div>

                        <div className="agree-checkbox-container">
                            <input
                                type="checkbox"
                                className="input-checkbox"
                                name="agree"
                                id=""
                            />
                            <p>
                                By checking the box, you’re agreeing to our <a href="#">Terms of Service</a> & <a href="#">Privacy Policy</a>
                            </p>
                        </div>
                        <button type="submit">
                            <span>продолжи</span>
                            {rightArrowVector}
                        </button>
                    </form>
                </div>
            </main>
        </RegistrationFormWrapper>
    );
};

export default withTheme(RegistrationForm);