/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */

import React from 'react';
import './chats.css';

class Contact extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            selected : this.props.selected
        }
    }
    onClick() {
        // This toggling of the contact selection is for demo purposes only
        // Once backend is implemented, only one contact can be selected
        if (this.state.selected === "false") {
            this.setState({selected : "true"})
        } else {
            this.setState({selected : "false"})
        }
        
    }
    render() {
        return (
            <div class={this.state.selected === "true" ? "contact dark" : "contact"}>
                        <div class="profilepiccontainer">
                            <img src={this.props.pfpsrc} class="profilepic" onClick={() => this.onClick()} 
                                alt="profile" />
                        </div>
                        <div class="profilenamecontainer">
                            <div class="profilename" onClick={() => this.onClick()}>{this.props.name}</div>
                        </div>
            </div>
        )
    }
}

export default Contact;