import React from "react";
import styled, { keyframes } from 'styled-components';
import SVGIcon from "../../components/UI/Icon/SVGIcon";
import Pagination from "../../components/UI/Pagination";
import { HashLoader } from 'react-spinners';

const ChatSVG = () => {
    return <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z"/></svg>;
}

const Box = styled.div`
    box-shadow: 0 2px 1px #00000010;
    border: 1px solid #c2c4c2;
    border-radius: 14px;
`;

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`
    text-align: center;
    height: 100px;
    padding-top: 32px;
    
    z-index: 1;
    position: relative;
    top: 0;
    
    & h2 {
        font-weight: 600;
        text-align: center;
        padding: 0;
        display: inline-block;
        transform: translateY(6px);
    }
`;
const FilterForm = styled.div`
    display: inline-block;
    float: right
`;

const FilterOption = styled(Box)`
    display: inline-block;
    border: 1px solid #c2c4c2;
    border-radius: 14px;
    padding: 6px 10px;
    margin: 0 12px;
    font-size: 11pt;
    width: 160px;
    
    & input[type=text] {
        margin: 0 8px;
        display: inline-block;
        width: 20px;
        border: 0;
        border-bottom: 1px solid gray;
        outline: none;
        padding-bottom: 2px;
    }
`;

const FilterSetting = styled.div`
    border-top: 1px solid #c2c4c2;
    margin-top:  6px;
    padding-top: 8px;
    font-size: 10pt;
    transform: translate(4px)
`;

const FilterButton = styled.button`
    background: royalblue;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    float: right;
    margin: 0 10px;
    box-shadow: 0 2px 1px #00000020;
    transition: 250ms ease;

    transform: translateY(12px);

    &:hover {
        box-shadow: 0 2px 2px #00000060;
    }
`;

const UserList = styled.div`
    margin: 32px auto;
    margin-bottom: 0;
    display: block;
`;


const ContactButton = styled.button`
    background: white;
    border: 2px solid royalblue;
    border-radius: 12px;
    color: royalblue;
    font-weight: 600;
    line-height: 20px;
    transition: 150ms ease;
    width: 100%;
    font-size: 10.5pt;
    height: 36px;
    opacity: 0;
    padding: 0px 10px;
    clip-path: border-box;
    box-sizing: border-box;

    & svg {
        fill: royalblue;
        margin: 0;
        margin-right: 6px;
        transform: translateY(2px);
    }

    &:hover {
        color: white;
        background: royalblue;
    }
    &:hover svg {
        fill: white
    }
`;

const UserAppear = keyframes`
    0%, 50% {
        opacity: 0;
        transform: scale(1.05)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
`;

const UserCard = styled(Box)`
    display: inline-block;
    padding: 10px;
    padding-top: 20px;
    background: white;
    
    width: 200px;
    height: 256px;

    margin-right: 20px;
    margin-bottom: 84px;

    text-align: center;

    animation: ${UserAppear} 500ms ease;

    & h4 {
        margin: 10px 0;
        font-weight: 600;
    }
    & p {
        margin: 10px 0;
        height: 74px;
        color: gray;
        font-size: 10pt;
    }

    transition: 150ms ease;
    &:hover > ${ContactButton} {
        opacity: 1;
        padding: 6px 10px;
    }
    &:hover {
        height: 300px;
        margin-bottom: 40px;
    }
`;

const Badges = styled.div`
    height: 0px;
`;

const LeftBadge = styled.div`
    float: left;
    transform: translate(90%, -100%);
    background: lightgray;
    border: 3px solid white;
    border-radius: 100px;
    width: 36px; height: 36px;
`;

const RightBadge = styled(LeftBadge)`
    float: right;
    transform: translate(-75%, -100%);
    background: limegreen;
    & p {
        transform: translateY(6px);
        font-size: 11pt;
        font-weight: 600;
        color: white;
        text-shadow: 0 2px 1px #00000040;
        margin: 0;
        height: auto;
    }
`;

const LoadingText = styled.h2`
    text-align: center;
    line-height: 3.5em;
    margin: 0;
    padding: 100px 0;

    & span {
        display: inline;
        margin: 0px auto
    }
`;

class UserDisplay extends React.Component {

    /** @type {{ value: import('../../API/User').User[] }} */
    props;

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>123
                {
                    this.props.value.map(x => {
                        return (
                            <UserCard>
                                <SVGIcon src='/images/icons/user.svg' width='100' height='100' />
                                <Badges>
                                    <LeftBadge>
                                        <SVGIcon src='/images/icons/question.svg' style={{margin: '5px 0'}} width='20' height='20' />
                                    </LeftBadge>
                                    <RightBadge>
                                        <p>?</p>
                                    </RightBadge>
                                </Badges>

                                <h4 className="inner-element">User, 0</h4>
                                <p>No description provided.</p>

                                <ContactButton>
                                    <ChatSVG />
                                    Перейти в чат
                                </ContactButton>
                                
                            </UserCard>
                        )
                    })
                }
            </div>
        );
    }
}

class Users extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [{}],
            loading: false
        }
    }

    componentDidMount() {

    }

    render() {
        return (
            <UserList>

                <h2 style={{textAlign: 'center', lineHeight: '11pt', marginBottom: 32}}>
                    Выбери соседа
                    <br/>
                    <br/>
                    <span style={{ fontSize: '11pt', fontWeight: 500 }}>
                        Не забывай, с этим человеком<br/>
                        придется жить бок-о-бок!
                    </span>
                </h2>

                {
                    this.state.loading ?
                    <UserDisplay value={this.state.data} /> :
                    <LoadingText>
                        Пожалуйста подождите, идет загрузка данных<br/>
                        <HashLoader color='#0077aa' />
                    </LoadingText>
                }

            </UserList>
        )
    }
}

class Filters extends React.Component {
    render() {
        return (
            <FilterForm>
                <FilterOption>
                    Совместимость

                    <FilterSetting>
                            от
                            <input type='text' />
                            до
                            <input type='text' />
                    </FilterSetting>
                
                </FilterOption>

                <FilterOption>
                    Возраст

                    <FilterSetting>
                            от
                            <input type='text' />
                            до
                            <input type='text' />
                    </FilterSetting>
                
                </FilterOption>
                    
                <FilterButton>
                    <SVGIcon src='/images/icons/search.svg' width='18' height='18' />
                </FilterButton>
            </FilterForm>
        );
    }
}

export default class Tinder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <>
                <Title>
                    <BackButton>
                        <SVGIcon src='/images/icons/left-arrow-light.svg' width={10} height={16}/>     
                        Вернуться назад
                    </BackButton>
                
                    <Filters />
                </Title>

                <div style={{transform: 'translateY(-100px)', position: 'relative', top:0, zIndex: 0}}>
                    <Users />
                    <Pagination pages={0} />
                </div>
            </>
        );
    }
}