"use strict";

exports.__esModule = true;
exports.default = UserProfileHeader;

var _react = _interopRequireDefault(require("react"));

var _styles = require("@mui/material/styles");

var _material = require("@mui/material");

var _ChangeCover = _interopRequireDefault(require("../ChangeCover"));

var _ChangePicture = _interopRequireDefault(require("../ChangePicture"));

var _reactIntl = require("react-intl");

var _core = require("@selfcommunity/core");

const _excluded = ["className", "userId", "user", "ChangePictureProps", "ChangeCoverProps"];

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

const PREFIX = 'SCUserProfileHeader';
const classes = {
  cover: `${PREFIX}-cover`,
  avatar: `${PREFIX}-avatar`,
  info: `${PREFIX}-info`,
  username: `${PREFIX}-username`,
  changePicture: `${PREFIX}-change-picture`,
  changeCover: `${PREFIX}-change-cover`
};
const Root = (0, _styles.styled)(_material.Box, {
  name: PREFIX,
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root
})(({
  theme
}) => ({
  [`& .${classes.cover}`]: {
    position: 'relative',
    minHeight: 350,
    background: 'linear-gradient(180deg, rgba(177,177,177,1) 0%, rgba(255,255,255,1) 90%)'
  },
  [`& .${classes.avatar}`]: {
    display: 'block',
    position: 'relative',
    margin: '0px auto',
    top: 190,
    width: 200,
    height: 200,
    borderRadius: 120,
    border: '#FFF solid 5px'
  },
  [`& .${classes.info}`]: {
    marginTop: 0.5,
    padding: 3
  },
  [`& .${classes.username}`]: {
    marginTop: 50
  },
  [`& .${classes.changePicture}`]: {
    position: 'relative',
    display: 'flex',
    margin: '0px auto',
    top: 110,
    left: 90
  },
  [`& .${classes.changeCover}`]: {
    position: 'absolute',
    right: 10,
    bottom: 10,
    [theme.breakpoints.down('md')]: {
      bottom: 310
    }
  }
}));

function UserProfileHeader(props) {
  // PROPS
  const {
    className = null,
    userId = null,
    user = null,
    ChangePictureProps = {},
    ChangeCoverProps = {}
  } = props,
        rest = _objectWithoutPropertiesLoose(props, _excluded); // PREFERENCES


  const scPreferences = (0, _core.useSCPreferences)(); // CONTEXT

  const scUserContext = (0, _core.useSCUser)(); // STATE

  const {
    scUser,
    setSCUser
  } = (0, _core.useSCFetchUser)({
    id: userId,
    user
  }); // INTL

  const intl = (0, _reactIntl.useIntl)();
  /**
   * Handles Change Avatar
   * Only if scUser.id === scUserContext.user.id
   * @param avatar
   */

  function handleChangeAvatar(avatar) {
    if (scUser.id === scUserContext.user.id) {
      setSCUser(Object.assign({}, scUser, {
        avatar: avatar.avatar
      }));
    }
  }
  /**
   * Handles Change Cover
   * Only if scUser.id === scUserContext.user.id
   * @param cover
   */


  function handleChangeCover(cover) {
    if (scUser.id === scUserContext.user.id) {
      setSCUser(Object.assign({}, scUser, {
        cover: cover
      }));
    }
  }
  /**
   * Renders root object
   */


  if (scUser) {
    const _backgroundCover = Object.assign({}, scUser.cover ? {
      background: `url('${scUser.cover}') center / cover`
    } : {
      background: `url('${scPreferences.preferences[_core.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover`
    });

    return /*#__PURE__*/_react.default.createElement(Root, _extends({
      className: className
    }, rest), /*#__PURE__*/_react.default.createElement(_material.Paper, {
      style: _backgroundCover,
      classes: {
        root: classes.cover
      }
    }, /*#__PURE__*/_react.default.createElement("img", {
      src: scUser.avatar ? scUser.avatar : '',
      className: classes.avatar
    }), scUserContext.user && scUser.id === scUserContext.user.id && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ChangePicture.default, _extends({
      iconButton: true,
      onChange: handleChangeAvatar,
      className: classes.changePicture
    }, ChangePictureProps)), /*#__PURE__*/_react.default.createElement("div", {
      className: classes.changeCover
    }, /*#__PURE__*/_react.default.createElement(_ChangeCover.default, _extends({
      onChange: handleChangeCover
    }, ChangeCoverProps))))), /*#__PURE__*/_react.default.createElement(_material.Typography, {
      variant: "h5",
      align: 'center',
      className: classes.username
    }, scUser.username), /*#__PURE__*/_react.default.createElement(_material.Grid, {
      container: true,
      spacing: 2,
      className: classes.info
    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
      item: true,
      xs: 6
    }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
      variant: "body2"
    }, /*#__PURE__*/_react.default.createElement("b", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "ui.userProfileHeader.realName",
      defaultMessage: "ui.userProfileHeader.realName"
    }), ":"), ' ', scUser.real_name ? scUser.real_name : ' - '), /*#__PURE__*/_react.default.createElement(_material.Typography, {
      variant: "body2"
    }, /*#__PURE__*/_react.default.createElement("b", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "ui.userProfileHeader.dateOfBirth",
      defaultMessage: "ui.userProfileHeader.dateOfBirth"
    })), ' ', scUser.date_of_birth ? `${intl.formatDate(scUser.date_of_birth, {
      year: 'numeric',
      month: 'numeric',
      day: 'numeric'
    })}` : ' - '), /*#__PURE__*/_react.default.createElement(_material.Typography, {
      variant: "body2"
    }, /*#__PURE__*/_react.default.createElement("b", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "ui.userProfileHeader.job",
      defaultMessage: "ui.userProfileHeader.job"
    }), ":"), ' ', scUser.description ? scUser.description : ' - ')), /*#__PURE__*/_react.default.createElement(_material.Grid, {
      item: true,
      xs: 6
    }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
      variant: "body2"
    }, /*#__PURE__*/_react.default.createElement("b", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "ui.userProfileHeader.dateJoined",
      defaultMessage: "ui.userProfileHeader.dateJoined"
    }), ":"), ' ', scUser.date_joined ? `${intl.formatDate(scUser.date_joined, {
      year: 'numeric',
      month: 'numeric',
      day: 'numeric'
    })}` : ' - '), /*#__PURE__*/_react.default.createElement(_material.Typography, {
      variant: "body2"
    }, /*#__PURE__*/_react.default.createElement("b", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "ui.userProfileHeader.website",
      defaultMessage: "ui.userProfileHeader.website"
    }), ":"), ' ', scUser.website ? scUser.website : ' - '))), /*#__PURE__*/_react.default.createElement(_material.Divider, null));
  }

  return null;
}