import React, { Component } from "react";
import { connect } from "react-redux";
import { Card, Container, Header, Label, List } from "semantic-ui-react";

class Profile extends Component {
  render() {
    const { selfUser } = this.props;
    return <ProfileView user={selfUser} />;
  }
}

function mapStateToProps(state) {
  return { ...state.user };
}

const ProfileView = ({ user }) => (
  <Container>
    <Header>Profile</Header>
    <Card>
      <Card.Content>
        <Card.Header>{user.username || "No username!"}</Card.Header>
        <Card.Meta>{user.email || "No email!"}</Card.Meta>
        <Card.Description>
          <span>
            {user.client && "Client"}{user.provider && "Provider"}
            {!user.client && !user.provider && "User Registration Not Completed"}
          </span>
          {user.first_name} {user.last_name}
          {user.userinfo && <List>
            {Object.keys(user.userinfo).map(function(key) {
              return (<List.Item key={key}>
                {key}: {user.userinfo[key]}
              </List.Item>)
            })}
          </List>}
        </Card.Description>
      </Card.Content>
      <Card.Content extra>
        <Label color={user.is_active ? "teal" : "red"} size="tiny" tag>
          {user.is_active ? "Active" : "Deactivated"}
        </Label>
      </Card.Content>
    </Card>
  </Container>
);

export default connect(mapStateToProps)(Profile);