import React from "react";

import styles from "../../src/styles/render-friend.css";
import style from "../helpers/graph-styles";

const DEFAULT_SIZE = 15;
const DEGREES_OF_COOL = 360;

const RenderFriend = ({friend, styleObj, className, contrLink}) => {

  const { name, img, profile, friends } = friend;
  let { size } = friend;
  const parentFriend = { name, img, profile };
  size = size || DEFAULT_SIZE;

  const bgImg = {backgroundImage: `url(${img})`};
  let applyStyle = styleObj
    ? Object.assign(bgImg, styleObj)
    : Object.assign(bgImg, style("single", size));

  applyStyle = friends ? style("container", size) : applyStyle;
  let applyClass = friends ? styles.join : styles.friend;
  applyClass = styleObj ? applyClass : `${applyClass} ${styles.join} ${className || ""}`;

  const renderFriends = (friendsArr) => {
    const angleVal = (DEGREES_OF_COOL / friendsArr.length);
    let rotateVal = 0;

    return friendsArr.map((friendObj) => {
      rotateVal += angleVal;
      return (
        <RenderFriend
          key={friendObj.name}
          friend={friendObj}
          styleObj={style("child", size, rotateVal)}
          contrLink={friendObj.profile}/>
        );
    });
  };

  const renderComponent = () => (
    <div className={applyClass} style={applyStyle}>
      {!!friends && renderFriends(friends)}
      {!!friends && <RenderFriend friend={parentFriend} styleObj={style("parent", size)}/>}
    </div>
  );

  if (contrLink) {
    return (
      <a href={contrLink} target="_blank">
        {renderComponent()}
      </a>
    );
  }

  return renderComponent();
};

RenderFriend.propTypes = {
  friend: React.PropTypes.object,
  styleObj: React.PropTypes.object
};

export default RenderFriend;