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

import React from 'react';
import '../css/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;