"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 _core = require("@selfcommunity/core");

var _Skeleton = _interopRequireDefault(require("./Skeleton"));

var _classnames = _interopRequireDefault(require("classnames"));

var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));

const _excluded = ["id", "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 = {
  root: `${PREFIX}-root`,
  cover: `${PREFIX}-cover`,
  avatar: `${PREFIX}-avatar`,
  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.username}`]: {
    marginTop: 50,
    textAlign: 'center'
  },
  [`& .${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
    }
  }
}));

/**
 * > API documentation for the Community-UI User Profile Header component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {UserProfileHeader} from '@selfcommunity/ui';
 ```

 #### Component Name

 The name `SCUserProfileHeader` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCUserProfileHeader-root|Styles applied to the root element.|
 |cover|.SCUserProfileHeader-cover|Styles applied to the cover element.|
 |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
 |info|SCUserProfileHeader-info|Styles applied to the info element.|
 |username|SCUserProfileHeader-username|Styles applied to the username element.|
 |changePicture|.SCUserProfileHeader-change-picture|Styles applied to changePicture element.|
 |changeCover|.SCUserProfileHeader-change-cover`|Styles applied to changeCover element.|

 * @param inProps
 */
function UserProfileHeader(inProps) {
  // PROPS
  const props = (0, _useThemeProps.default)({
    props: inProps,
    name: PREFIX
  });

  const {
    id = null,
    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)(); // HOOKS

  const {
    scUser,
    setSCUser
  } = (0, _core.useSCFetchUser)({
    id: userId,
    user
  });
  /**
   * 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
      }));
    }
  } // RENDER


  if (!scUser) {
    return /*#__PURE__*/_react.default.createElement(_Skeleton.default, null);
  }

  const isMe = scUserContext.user && scUser.id === scUserContext.user.id;

  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({
    id: id,
    className: (0, _classnames.default)(classes.root, 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
  }), isMe && /*#__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",
    className: classes.username
  }, scUser.username));
}