import React, { useState, useEffect } from 'react';
import { Helmet } from 'react-helmet';
import { Loader, Icon, List, Container, Card, Grid, Message, Button } from 'semantic-ui-react';
import { Link, Outlet, useParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { toast } from 'react-toastify';
import Avatar from 'boring-avatars';
import moment from 'moment';
import utils from '../../../utils/utils';
import actions from '../../../actions';
import api from '../../../api';

import BlurrableImage from '../../includes/BlurrableImage';
import SupporterBadge from '../../includes/SupporterBadge';
import FollowButton from '../../includes/FollowButton';

function Profile() {
  const [loading, setLoading] = useState(false);
  const dispatch = useDispatch();
  const { username } = useParams();

  const { user, profileUser, errorMessage } = useSelector(state => {
    const users = state.users.users;
    const profileUser = users.filter(u => username === u.username)[0];
    const user = state.users.users.filter(u => state.auth.currentUserId === u._id)[0];
    return { user, profileUser, errorMessage: state.users.errorMessage };
  });
  const userId = user?._id;

  useEffect(() => {
    setLoading(true);
    api.users.get(username, user => {
      dispatch(actions.users.receive(user));
      setLoading(false);
    }, err => {
      dispatch(actions.users.requestFailed(err));
      setLoading(false);
    });
  }, [dispatch, username, userId])

  return (
    <Container style={{ marginTop: '40px' }}>
      <Helmet title={profileUser?.username ? `${profileUser.username}'s Profile` : 'Profile'} />
      {loading && !profileUser &&
        <div style={{textAlign: 'center'}}>
          <h4>Loading {username}'s profile...</h4>
          <Loader active inline="centered" />
        </div>
      }
      {errorMessage && (
      <Message>
        <p><strong>There was a problem finding this page.</strong></p>
        <p>{errorMessage}</p>
      </Message>
      )}
      {profileUser
        && (
        <Grid stackable>
          <Grid.Column computer={5}>
            <Card.Group centered>
              <Card raised color="yellow">
                <Card.Content>
                  <div style={{textAlign: 'center'}}>
                    {profileUser.avatar ?
                      <BlurrableImage
                        src={utils.cropUrl(utils.avatarUrl(profileUser), 200, 200)}
                        blurHash={profileUser.avatarBlurHash}
                        width={200} height={200}
                        style={{ borderRadius: '50%' }}
                      />
                    :
                      <Avatar
                        size={200}
                        name={profileUser.username}
                        variant="beam"
                        colors={["#B2A4FF", "#FFB4B4", "#FFDEB4", "#FDF7C3"]}
                      />
                    }
                  </div>
                  <Card.Header>{profileUser.username}</Card.Header>
                  <Card.Meta>
                    <span className="date">
                      Joined {moment(profileUser.createdAt).fromNow()}
                    </span>
                  </Card.Meta>
                  {profileUser.isGoldSupporter &&
                    <div style={{marginTop: 10}}><SupporterBadge type='gold' /></div>
                  }
                  {profileUser.isSilverSupporter && !profileUser.isGoldSupporter &&
                    <div style={{marginTop: 10}}><SupporterBadge type='silver' /></div>
                  }
                </Card.Content>
                {profileUser._id !== user?._id &&
                  <Card.Content style={{marginTop: 10}}>
                    <FollowButton targetUser={profileUser} />
                  </Card.Content>
                }
                {profileUser._id === user?._id &&
                  <Card.Content extra textAlign='right'>
                    <p><Icon name='users' /> You have {user?.followerCount || 0} followers</p>
                  </Card.Content>
                }
                {profileUser.location
                  && (
                  <Card.Content extra textAlign="right">
                    <Icon name="map pin" /> {profileUser.location}
                  </Card.Content>
                  )
                }
                {user && user._id === profileUser._id
                  && (
                  <Card.Content extra textAlign="right">
                    <Link to={`/${profileUser.username}/edit`}>
                      <Icon name="pencil" /> Edit profile
                    </Link>
                  </Card.Content>
                  )
                }
              </Card>

              {(profileUser.bio || profileUser.website || profileUser.twitter || profileUser.facebook) &&
                <Card fluid>
                  <Card.Content>
                    <Card.Header>
                      About {profileUser.username}
                    </Card.Header>
                  </Card.Content>
                  <Card.Content>
                    <p>{profileUser.bio}</p>
                    <List relaxed>
                      {profileUser.website
                        && (
                        <a href={utils.ensureHttp(profileUser.website)} target="_blank" className="item" rel="noopener noreferrer">
                          <List.Icon name="globe" size="large" verticalAlign="middle" />
                          <List.Content>
                            <List.Header>{profileUser.website}</List.Header>
                          </List.Content>
                        </a>
                        )
                      }
                      {profileUser.twitter
                        && (
                          <a href={`https://twitter.com/${profileUser.twitter.replace(/@/g, '')}`} target="_blank" className="item" rel="noopener noreferrer">
                          <List.Icon name="twitter" size="large" verticalAlign="middle" />
                          <List.Content>
                            <List.Header>
                              @{profileUser.twitter.replace(/@/g, '')}
                            </List.Header>
                            <List.Description>Twitter</List.Description>
                          </List.Content>
                        </a>
                        )
                      }
                      {profileUser.facebook
                        && (
                        <a href={`https://facebook.com/${profileUser.facebook}`} target="_blank" className="item" rel="noopener noreferrer">
                          <List.Icon name="facebook" size="large" verticalAlign="middle" />
                          <List.Content>
                            <List.Header>{profileUser.facebook}</List.Header>
                            <List.Description>Facebook</List.Description>
                          </List.Content>
                        </a>
                        )
                      }
                      {profileUser.instagram
                        && (
                        <a href={`https://instagram.com/${profileUser.facebook}`} target="_blank" className="item" rel="noopener noreferrer">
                          <List.Icon name="instagram" size="large" verticalAlign="middle" />
                          <List.Content>
                            <List.Header>{profileUser.instagram}</List.Header>
                            <List.Description>Instagram</List.Description>
                          </List.Content>
                        </a>
                        )
                      }
                      {profileUser.linkedIn
                        && (
                        <a href={`https://linkedin.com/in/${profileUser.linkedIn}`} target="_blank" className="item" rel="noopener noreferrer">
                          <List.Icon name="linkedin" size="large" verticalAlign="middle" />
                          <List.Content>
                            <List.Header>{profileUser.linkedIn}</List.Header>
                            <List.Description>LinkedIn</List.Description>
                          </List.Content>
                        </a>
                        )
                      }
                    </List>
                  </Card.Content>
                </Card>
              }
            </Card.Group>
          </Grid.Column>

          <Grid.Column computer={11}>
            <Outlet />
          </Grid.Column>
        </Grid>
        )
      }
    </Container>
  );
}

export default Profile;
