import React, { useState } from "react";

import { styled } from "styled-components";

const Question = styled.div`
    padding-top: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 799px;
    min-height: 151px;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 34.5px;
    & h2 {
        color: #cccccc;
        position: absolute;
        top: 0px;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border: 2px solid #cccccc;
        border-radius: 100px;
    }
`;

const QuestionTitle = styled.p`
    margin-bottom: 80px;
    text-align: center;
    width: 638px;
    font-size: 16px;
    margin-right: 0;
`;

const Answers = styled.div`
    display: flex;
    margin-bottom: 29.5px;
    & p, & span {
        font-size: 14px;
    }
    & input, & p {
        margin-right: 32px;
        transform: translateY(6px)
    }
    & label {
        transform: translateY(6px)
    }
`;

const Answer = styled.label`
    & span {
        position: absolute;
        top: -17px;
        left: 3.5px
    }
`;

const Id = styled.div`
    color: #cccccc;
    position: absolute;
    top: 0px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #b2b4b2;
    border-radius: 100px;
`;


const PsychTestQuestion = (props) => {
    const answerChangeHandler = (event) => {
        props.onChangeAnswer(event.target.value, event.target.name);
    };
    return (
        <Question>
            <Id>{+props.account + 1}</Id>
            <QuestionTitle>{props.name}</QuestionTitle>
            <Answers>
                <p>Не важно</p>
                <Answer>
                    <input
                        name={props.account}
                        type="radio"
                        value="1"
                        onChange={answerChangeHandler}
                    />
                    <span>1</span>
                </Answer>
                <Answer>
                    <input
                        name={props.account}
                        type="radio"
                        value="2"
                        onChange={answerChangeHandler}
                    />
                    <span>2</span>
                </Answer>
                <Answer>
                    <input
                        name={props.account}
                        type="radio"
                        value="3"
                        onChange={answerChangeHandler}
                    />
                    <span>3</span>
                </Answer>
                <Answer>
                    <input
                        name={props.account}
                        type="radio"
                        value="4"
                        onChange={answerChangeHandler}
                    />
                    <span>4</span>
                </Answer>
                <Answer>
                    <input
                        name={props.account}
                        type="radio"
                        value="5"
                        onChange={answerChangeHandler}
                    />
                    <span>5</span>
                </Answer>
                <p>Очень важно</p>
            </Answers>
        </Question>
    );
};

export default PsychTestQuestion;