import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';


export class ContactsList extends React.Component {
    contactToContactItem = contact => {
        const avatarUrl = contact.picture.thumbnail;
        const { title, first, last } = contact.name;
        const name = `${title} ${first} ${last}`.trim();
        const phone = contact.phone;
        return <ContactItem key={name} avatarUrl={avatarUrl} name={name} phone={phone} />;
    };

    render() {
        return (
            <ul className="ui relaxed divided list selection">
                {this.props.contacts.map(this.contactToContactItem)}
            </ul>
        );
    }
}

export const ContactItem = ({ avatarUrl, name, phone }) => {
    return (
        <li className="item">
            <img src={avatarUrl} className="ui mini rounded image" alt="" />
            <div className="content">
                <h4 className="header">{name}</h4>
                <div className="description">{phone}</div>
            </div>
        </li>
    );
};

export class App2 extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            contacts: [],
            callbackRefresh: null,
            refreshCounter: 0,
        }
    }
    toggleGather = () => {
        if (this.state.callbackRefresh === null) {
            this.setState({ callbackRefresh: setInterval(this.gatherData, 2000) });
        }
        else {
            clearInterval(this.state.callbackRefresh);
            this.setState({ callbackRefresh: null });
        }
    }

    gatherData = () => {
        fetch("https://randomuser.me/api/?format=json&results=5")
            .then(res => res.json())
            .then(json => this.setState({
                contacts: json.results,
                refreshCounter: this.state.refreshCounter + 1
            }));
    }

    componentDidMount() {
        this.gatherData();
    }

    render() {
        return (
            <>
                <button onClick={this.toggleGather}>refresh</button>
                <p>Refresh counter: {this.state.refreshCounter}</p>
                <p>Refresh {this.state.callbackRefresh ? 'enabled' : 'disabled'}</p>
                <div>
                    <main className="ui main text container">
                        <ContactsList contacts={this.state.contacts} />
                    </main>
                </div>
            </>
        );
    }
}

export default App2;