import React, { useEffect, useState }from 'react';
import styled, { keyframes } from 'styled-components';
import SVGIcon from "../../components/UI/Icon/SVGIcon";
import { User } from '../../API/User';

import { useFetching } from '../../hooks/useFetching';

import { Row, Col, Stack } from 'react-bootstrap';

const BackButton = styled.button`
    border: 1px solid #c2c4c2;
    display: inline-block;
    padding: 12px 16px;
    border-radius: 14px;

    background: #ffffff;
    color: gray;
    box-shadow: 0 2px 1px #00000010;

    font-size: 12pt;
    float: left;

    & ${SVGIcon} {
        transform: translate(-4px, 2px)
    }
`;

const Title = styled.div`
    height: 100px;
    padding-top: 32px;
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    top: 0;
    
    & h2 {
        margin-left: 28px;
        font-weight: 600;
        padding: 0;
        display: inline-block;
        transform: translateY(4px);
    }

    & span {
        margin-left: 14px;
        font-weight: 500;
        font-size: 18px;
        line-height: 19px;
    }
`;

const CabinetSection = styled.div`
    width: 1270px;
    height: 650px;
    
    background: #FFFFFF;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    margin: 27px auto;
`;

const CabinetContainer = styled(Row)`
    padding: 30px 26px 30px 36px;
`;

const Avatar = styled.img`
    width: 256px;
    height: 256px;

    margin: 25px 0px 0px 65px;

    border-radius: 50%;
    box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.34);
`;

const UploadPhoto = styled.button`
    display: flex;
    align-items: center;
    justify-content: center;

    width: 192px;
    height: 32px;

    margin: 16px auto 0px;

    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF;

    background: #007EFF;
    border-radius: 12px;
`;

const WelcomeText = styled.p`
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
`;

const MainText = styled.p`
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
`;

const InputBlock = styled.input`
    border: 1px solid #CCCCCC;
    border-radius: 12px;

    width: ${props => props.width}px;
    height: ${props => props.height}px;

    padding-left: 10px;

    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #000000;

    &::placeholder {
        font-weight: 500;
        font-size: 12px;
        line-height: 24px;
        color: #CCCCCC;
    }
`;

const TextAreaBlock = styled.textarea`
    border: 1px solid #CCCCCC;
    border-radius: 12px;

    margin: 16px 0px 0px 55px;
    resize: none;

    padding: 8px;

    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #000000;

    &::placeholder {
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        color: #CCCCCC;
    }
`;

const CharacterTraitBlock = styled.div`
    width: calc(100% + 15px);
    height: 28px;

    padding: 0;

    font-size: 14px;
    line-height: 28px;
    display: inline-block;
    align-items: center;
    text-align: center;
    color: #FFFFFF;

    background: ${props => props.background};
    border-radius: 20px;
`;

const ButtonCircleChangeTrait = styled.button`
    width: 28px;
    height: 28px;

    padding: 0px;
    
    font-weight: 700;
    font-size: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 70%;

    color: #FFFFFF;
    background: #D9D9D9;
`;

const ButtonChangeTrait = styled.button`
    margin-top: 14px;

    width: auto;
    height: 27px;

    padding: 0;

    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    text-align: left;

    color: #007EFF;
    background: none;
`;

const InformationBlock = (props) => {
    return (
        <>
            <Row style={{marginTop: props.marginTop, marginLeft: 19}}>
                <Col xs={5}>
                    <MainText>{props.title}</MainText>
                </Col>
                <Col>
                    <MainText>{props.text}</MainText>
                </Col>
            </Row>
        </>
    );
}

const InformationBlockInput = (props) => {
    return (
        <>
            <Row style={{marginTop: props.marginTop, marginLeft: 19}}>
                <Col xs={5}>
                    <MainText>{props.title}</MainText>
                </Col>
                <Col xs={5}>
                    <InputBlock width={props.width} height={props.height} placeholder={props.placeholderInput} value={props.valueInput}/>
                </Col>
            </Row>
        </>
    );
}

const TraitsBlock = (props) => {
    const list = props.list;

    if (list.length == 0) return (
        <>
            <h1>Вы ничего не указали</h1>
        </>
    );

    return (
        <>  
            <Row style={{marginLeft: 19}}>
                {
                    list.map((el, i) => {
                        return (
                            <Col style={{paddingLeft: 0, marginRight: 9, marginTop: 10}} key={i}>
                                <CharacterTraitBlock background={el.color}>
                                    {el.text}
                                </CharacterTraitBlock>
                            </Col>
                        );
                    })
                }
                {props.button 
                ? 
                    <>
                        <Col style={{paddingLeft: 0, marginRight: 9, marginTop: 10}}>
                            <ButtonCircleChangeTrait>
                                +
                            </ButtonCircleChangeTrait>
                        </Col>
                    </>
                : 
                    <>
                    <ButtonChangeTrait>Изменить..</ButtonChangeTrait>
                    </>
                }
            </Row>
        </>
    );
}


const PersonalCabinet = function () {

    const [user, setUser] = useState()
    const userID = 1;

    const [fetchUser, isUserLoading, userError] = useFetching(async (userID) => {
        const response = await User.getById(userID);
        setUser(response)
        console.log(user.name)
    })

    useEffect(() => {
        fetchUser(userID)
    }, [])

    const TraitsListOne = [{text: 'Честность', color: '#3F51B5'}, {text: 'Аккуратность', color: '#03BCD6'}, {text: 'Музыкальность', color: '#E91D65'}, 
                            {text: 'Общительность', color: '#03A9F4'}, {text: 'Дружелюбность', color: '#8CC34D'}]

    const TraitsListTwo = [{text: 'Честность', color: '#3F51B5'}, {text: 'Аккуратность', color: '#03BCD6'}, {text: 'Музыкальность', color: '#E91D65'}, 
                            {text: 'Общительность', color: '#03A9F4'}, {text: 'Дружелюбность', color: '#8CC34D'}, {text: 'Мудрость', color: '#FF5923'}, 
                            {text: 'Адекватность', color: '#2196F4'}, {text: 'Щедрость', color: '#FFC308'}, {text: 'Вежливость', color: '#9D28B2'}]  

    const TraitsListThree = [{text: 'Курит', color: '#94740B'}, {text: 'Равнодушие', color: '#D9B8B0'}, {text: 'Эгоист', color: '#6E3F58'}, {text: 'Лень', color: '#9F6844'},
                            {text: 'Лживость', color: '#AD9029'}, {text: 'Диструктивность', color: '#9A150C'}, {text: 'Токсичность', color: '#608426'}]

    return (
        <>
            <Title>
                <BackButton>
                    <SVGIcon src='/images/icons/left-arrow-light.svg' width={10} height={16}/>     
                    Вернуться назад
                </BackButton>
                <h2>Личный кабинет<span>/ Мои данные</span></h2>
            </Title>
            <CabinetSection>
                <CabinetContainer>
                    <Col>
                        <Stack>
                            <WelcomeText>Добрый день, Александр!</WelcomeText>
                            <MainText>Ваш статус - Студент</MainText>
                            <Avatar src='/images/avatar-test.jpg'/>
                            <UploadPhoto>
                                <SVGIcon src='/images/icons/camera.svg' width={18} height={16}/>   
                                Загрузить фото
                            </UploadPhoto>
                            <TextAreaBlock rows={3} cols={30} placeholder='Опиши себя парой предложений..'/>
                            <TextAreaBlock style={{marginTop: 9}} rows={3} cols={30} placeholder='Напишите сюда свои хобби..'/>
                        </Stack>
                    </Col>
                    <Col>
                        <Stack style={{borderLeft: '1px solid #CCCCCC', height: '100%'}}>
                            <InformationBlock marginTop={13} title={'Имя'} text={'Александр'}/>
                            <InformationBlock marginTop={13} title={'Фамилия'} text={'Манаенков'}/>
                            <InformationBlock marginTop={13} title={'Отчество'} text={'Викторович'}/>
                            <InformationBlock marginTop={13} title={'Дата рождения'} text={'14.09.2004'}/>
                            <InformationBlock marginTop={33} title={'Факультет'} text={'Информационные системы (по отраслям)'}/>
                            <InformationBlock marginTop={44} title={'Группа'} text={'СО-ИС-20'}/>
                            <InformationBlockInput marginTop={33} title={'Телефон'} width={190} height={32} placeholderInput={'Введите номер телефона'}/>
                            <InformationBlockInput marginTop={10} title={'E-mail'} width={190} height={32} placeholderInput={'Введите E-mail'}/>
                            <InformationBlockInput marginTop={10} title={'Telegram'} width={190} height={32} placeholderInput={'Введите Ваш телеграмм'}/>
                            <InformationBlockInput marginTop={10} title={'Discord'} width={190} height={32} placeholderInput={'Введите Ваш дискорд'}/>
                            <InformationBlockInput marginTop={55} title={'Город'} width={190} height={32} placeholderInput={'Введите город'}/>
                        </Stack>
                    </Col>
                    <Col>
                        <Stack style={{borderLeft: '1px solid #CCCCCC', height: '100%'}}>
                            <MainText style={{marginLeft: 19, marginTop: 13}}>Ваши личностные характеристики</MainText>
                            <TraitsBlock list={TraitsListOne} button={true}/>
                            <MainText style={{marginLeft: 19, marginTop: 25}}>Желаемые черты соседа</MainText>
                            <TraitsBlock list={TraitsListTwo}/>
                            <MainText style={{marginLeft: 19, marginTop: 19}}>Нежелаемые черты соседа</MainText>
                            <TraitsBlock list={TraitsListThree}/>
                        </Stack>
                    </Col>
                </CabinetContainer>
            </CabinetSection>
        </>
    );
};

export default PersonalCabinet;