"use strict";

require("core-js/modules/es.object.assign.js");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("core-js/modules/web.dom-collections.iterator.js");

require("core-js/modules/es.promise.js");

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

var THREE = _interopRequireWildcard(require("three"));

var _fiber = require("@react-three/fiber");

var _drei = require("@react-three/drei");

var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");

var _config = _interopRequireDefault(require("../config"));

var _threeStdlib = require("three-stdlib");

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _axios = _interopRequireDefault(require("axios"));

var _Eye = _interopRequireDefault(require("./body/Eye"));

var _Glasses = _interopRequireDefault(require("./body/Glasses"));

var _Hair = _interopRequireDefault(require("./body/Hair"));

var _Hat = _interopRequireDefault(require("./body/Hat"));

var _Pants = _interopRequireDefault(require("./body/Pants"));

var _Shirt = _interopRequireDefault(require("./body/Shirt"));

var _Shoe = _interopRequireDefault(require("./body/Shoe"));

var _Skin = _interopRequireDefault(require("./body/Skin"));

var _Head = _interopRequireDefault(require("./body/Head"));

var _Eyelash = _interopRequireDefault(require("./body/Eyelash"));

var _Eyebrow = _interopRequireDefault(require("./body/Eyebrow"));

var _lodash = _interopRequireDefault(require("lodash"));

var _reactLottie = _interopRequireDefault(require("react-lottie"));

var _pet = _interopRequireDefault(require("./pet"));

var _config2 = _interopRequireDefault(require("next/config"));

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

const _excluded = ["position", "quaternion", "playerId", "statePlayer", "callback", "emojiIcon", "chat"];

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

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 {
  publicRuntimeConfig
} = (0, _config2.default)();
const {
  characters
} = _config.default;
const defaultOptions = {
  loop: true,
  autoplay: true
};

const Player = _ref => {
  var _modelConfig$Eye, _modelConfig$Hair, _modelConfig$Pants, _modelConfig$Shirt, _modelConfig$Shoe, _modelConfig$Skin, _modelConfig$Skin2, _modelConfig$Skin3, _modelConfig$Skin4, _modelConfig$Glasses, _modelConfig$Hat, _modelConfig$Hair2, _modelConfig$Pants2, _modelConfig$Shirt2, _modelConfig$Shoe2, _modelConfig$Skin5, _modelConfig$Skin6;

  let {
    position,
    quaternion,
    playerId,
    statePlayer,
    callback,
    emojiIcon,
    chat
  } = _ref,
      props = _objectWithoutProperties(_ref, _excluded);

  const model = (0, _react.useRef)();
  const ref = (0, _react.useRef)();
  const [aName, setaName] = (0, _react.useState)('');
  const [mixer] = (0, _react.useState)(() => new THREE.AnimationMixer());
  const [Animation, setAnimation] = (0, _react.useState)({});
  const [modelConfig, setmodelConfig] = (0, _react.useState)(null);
  const [displayName, setdisplayName] = (0, _react.useState)('');
  const [hidden, setHidden] = (0, _react.useState)(true);
  const [emoji, setemoji] = (0, _react.useState)('');
  const [PopChat, setPopChat] = (0, _react.useState)('');
  const modelPlayer = (0, _drei.useGLTF)("".concat(characters.path, "/main/").concat(characters.lod0.base));
  const clone = (0, _react.useMemo)(() => _threeStdlib.SkeletonUtils.clone(modelPlayer.scene), [modelPlayer.scene]);
  const {
    nodes,
    materials
  } = (0, _fiber.useGraph)(clone);
  const {
    gl
  } = (0, _fiber.useThree)();
  const LOD = characters.lod0.Lod;
  const act = (0, _react.useMemo)(() => {
    let obj = [];
    characters.animations.map(i => {
      obj.push("".concat(characters.path, "/actions/").concat(i.fileName));
    });
    return obj;
  });
  const obj = (0, _drei.useGLTF)(act);
  const [NamePos, setNamePos] = (0, _react.useState)([0, 1.65, 0]);

  const _OnLoad = (animName, anim) => {
    const clip = anim.animations[0];
    const action = mixer.clipAction(clip, model.current);
    setAnimation(pre => {
      return _objectSpread(_objectSpread({}, pre), {}, {
        ["".concat(animName)]: {
          clip: clip,
          action: action
        }
      });
    });

    if (animName == 'idle') {
      action.play();
    }
  };

  (0, _react.useEffect)(() => {
    if (act && obj) {
      characters.animations.forEach((animationData, index) => {
        _OnLoad(animationData.name, obj[index]);
      });
    }
  }, [obj]);
  (0, _react.useEffect)(() => {
    if (playerId) {
      handleAuthSocket();
    }
  }, [playerId]);
  (0, _react.useEffect)(() => {
    if (chat) {
      const objLast = _lodash.default.findLast(chat);

      if ((objLast === null || objLast === void 0 ? void 0 : objLast.playerID) !== playerId) return;

      const obj = _lodash.default.findLast(chat, function (i) {
        return i.playerID == playerId;
      });

      setPopChat(obj === null || obj === void 0 ? void 0 : obj.message);
    }
  }, [chat]);
  (0, _react.useEffect)(() => {
    let fadeOutPopChat = setTimeout(() => setPopChat(""), 3000);
    return () => {
      clearTimeout(fadeOutPopChat);
    };
  }, [PopChat]);

  const handleAnimate = state => {
    if (state) {
      setaName(state);
    } else {
      setaName('idle');
    }
  };

  const handleAuthSocket = async () => {
    const request = (0, _axios.default)({
      url: "".concat(publicRuntimeConfig.CONFIG.backendEndpoint, "/api/v1/mockup/").concat(playerId),
      method: 'GET',
      headers: {
        'Content-Language': 'th',
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        "x-api-key": publicRuntimeConfig.CONFIG.headerApiKey.key
      },
      timeout: 20000,
      dataType: 'json'
    });
    request.then(response => {
      var _response$data, _response$data2;

      setmodelConfig(JSON.parse(response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.data.model));
      setdisplayName(response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.data.name);
    }).catch(error => {});
  };

  const updatePlayer = delta => {
    model.current.quaternion.copy(quaternion);
    model.current.position.lerp(position, 0.2);
  };

  (0, _react.useEffect)(() => {
    var _Animation$aName, _Animation$aName$acti;

    (_Animation$aName = Animation[aName]) === null || _Animation$aName === void 0 ? void 0 : (_Animation$aName$acti = _Animation$aName.action.reset()) === null || _Animation$aName$acti === void 0 ? void 0 : _Animation$aName$acti.fadeIn(0.5).play();
    return () => {
      var _Animation$aName2, _Animation$aName2$act;

      return (_Animation$aName2 = Animation[aName]) === null || _Animation$aName2 === void 0 ? void 0 : (_Animation$aName2$act = _Animation$aName2.action) === null || _Animation$aName2$act === void 0 ? void 0 : _Animation$aName2$act.fadeOut(0.5);
    };
  }, [aName]);

  const handleAnimation = a => {
    if (aName !== a) _lodash.default.debounce(() => handleAnimate(a), 100)();
  };

  const handlePlayerName = v => {
    if (hidden !== v) _lodash.default.debounce(() => setHidden(v), 200)();
  };

  const handleEmoji = v => {
    if (hidden !== v) _lodash.default.debounce(() => setemoji(v), 200)();
  };

  (0, _fiber.useFrame)((state, delta) => {
    var _ref$current;

    mixer === null || mixer === void 0 ? void 0 : mixer.update(delta);
    updatePlayer();
    handleAnimation(statePlayer.state);
    handleEmoji(emojiIcon.state);
    handlePlayerName((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.visible);
  });
  const bgWidth = 1920;
  const bgHeight = 1080;
  const lgWidth = gl.domElement.clientWidth;
  const lgHeight = gl.domElement.clientHeight;
  const fixedNarrowRatio = bgWidth / bgHeight;
  const currentNarrowRatio = lgWidth / lgHeight * 0.5;
  const minRatio = Math.min(fixedNarrowRatio / currentNarrowRatio, currentNarrowRatio / fixedNarrowRatio);
  const isDesktop = lgWidth > 943;
  const emojiX = isDesktop ? 10 : 5;
  nodes.Armature.visible = false;
  return /*#__PURE__*/_react.default.createElement("group", null, /*#__PURE__*/_react.default.createElement("group", {
    ref: model,
    key: playerId,
    dispose: null
  }, /*#__PURE__*/_react.default.createElement(_drei.Html, {
    center: true,
    distanceFactor: minRatio * emojiX,
    position: NamePos,
    zIndexRange: [0, 1],
    style: {
      transition: 'all 0.5s',
      opacity: !hidden ? 0 : 1
    }
  }, PopChat && /*#__PURE__*/_react.default.createElement(BoxFlexChat, null, /*#__PURE__*/_react.default.createElement(BoxChat, null, PopChat)), /*#__PURE__*/_react.default.createElement(BoxName, {
    name: displayName
  }, displayName), emoji && /*#__PURE__*/_react.default.createElement(EmotionBox, null, /*#__PURE__*/_react.default.createElement(_reactLottie.default, {
    options: _objectSpread(_objectSpread({}, defaultOptions), {}, {
      animationData: require("/src/components/@brandverse-core-ui/assets/lotties/".concat(emoji, ".json"))
    }),
    height: isDesktop ? 60 : 40,
    width: isDesktop ? 60 : 40,
    style: {
      margin: "none"
    }
  }))), /*#__PURE__*/_react.default.createElement("group", {
    ref: ref,
    dispose: null,
    scale: 1
  }, /*#__PURE__*/_react.default.createElement(_drei.Detailed, {
    distances: [0, 20, 30],
    onClick: () => callback({
      playerId,
      displayName
    })
  }, /*#__PURE__*/_react.default.createElement("group", {
    dispose: null
  }, (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Eye = modelConfig.Eye) === null || _modelConfig$Eye === void 0 ? void 0 : _modelConfig$Eye.name) && /*#__PURE__*/_react.default.createElement(_Eye.default, {
    modelConfig: modelConfig,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Hair = modelConfig.Hair) === null || _modelConfig$Hair === void 0 ? void 0 : _modelConfig$Hair.name) && /*#__PURE__*/_react.default.createElement(_Hair.default, {
    modelConfig: modelConfig,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Pants = modelConfig.Pants) === null || _modelConfig$Pants === void 0 ? void 0 : _modelConfig$Pants.name) && /*#__PURE__*/_react.default.createElement(_Pants.default, {
    modelConfig: modelConfig,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Shirt = modelConfig.Shirt) === null || _modelConfig$Shirt === void 0 ? void 0 : _modelConfig$Shirt.name) && /*#__PURE__*/_react.default.createElement(_Shirt.default, {
    modelConfig: modelConfig,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Shoe = modelConfig.Shoe) === null || _modelConfig$Shoe === void 0 ? void 0 : _modelConfig$Shoe.name) && /*#__PURE__*/_react.default.createElement(_Shoe.default, {
    modelConfig: modelConfig,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Skin = modelConfig.Skin) === null || _modelConfig$Skin === void 0 ? void 0 : _modelConfig$Skin.name) && /*#__PURE__*/_react.default.createElement(_Skin.default, {
    modelConfig: modelConfig,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Skin2 = modelConfig.Skin) === null || _modelConfig$Skin2 === void 0 ? void 0 : _modelConfig$Skin2.name) && /*#__PURE__*/_react.default.createElement(_Head.default, {
    modelConfig: modelConfig,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Skin3 = modelConfig.Skin) === null || _modelConfig$Skin3 === void 0 ? void 0 : _modelConfig$Skin3.name) && /*#__PURE__*/_react.default.createElement(_Eyelash.default, {
    modelConfig: modelConfig,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Skin4 = modelConfig.Skin) === null || _modelConfig$Skin4 === void 0 ? void 0 : _modelConfig$Skin4.name) && /*#__PURE__*/_react.default.createElement(_Eyebrow.default, {
    modelConfig: modelConfig,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Glasses = modelConfig.Glasses) === null || _modelConfig$Glasses === void 0 ? void 0 : _modelConfig$Glasses.name) && /*#__PURE__*/_react.default.createElement(_Glasses.default, {
    modelConfig: modelConfig,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Hat = modelConfig.Hat) === null || _modelConfig$Hat === void 0 ? void 0 : _modelConfig$Hat.name) && /*#__PURE__*/_react.default.createElement(_Hat.default, {
    modelConfig: modelConfig,
    nodes: nodes,
    LOD: LOD
  })), /*#__PURE__*/_react.default.createElement("group", {
    dispose: null
  }, (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Hair2 = modelConfig.Hair) === null || _modelConfig$Hair2 === void 0 ? void 0 : _modelConfig$Hair2.name) && /*#__PURE__*/_react.default.createElement(_Hair.default, {
    modelConfig: modelConfig,
    opacity: 1,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Pants2 = modelConfig.Pants) === null || _modelConfig$Pants2 === void 0 ? void 0 : _modelConfig$Pants2.name) && /*#__PURE__*/_react.default.createElement(_Pants.default, {
    modelConfig: modelConfig,
    opacity: 1,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Shirt2 = modelConfig.Shirt) === null || _modelConfig$Shirt2 === void 0 ? void 0 : _modelConfig$Shirt2.name) && /*#__PURE__*/_react.default.createElement(_Shirt.default, {
    modelConfig: modelConfig,
    opacity: 1,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Shoe2 = modelConfig.Shoe) === null || _modelConfig$Shoe2 === void 0 ? void 0 : _modelConfig$Shoe2.name) && /*#__PURE__*/_react.default.createElement(_Shoe.default, {
    modelConfig: modelConfig,
    opacity: 1,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Skin5 = modelConfig.Skin) === null || _modelConfig$Skin5 === void 0 ? void 0 : _modelConfig$Skin5.name) && /*#__PURE__*/_react.default.createElement(_Skin.default, {
    modelConfig: modelConfig,
    opacity: 1,
    nodes: nodes,
    LOD: LOD
  }), (modelConfig === null || modelConfig === void 0 ? void 0 : (_modelConfig$Skin6 = modelConfig.Skin) === null || _modelConfig$Skin6 === void 0 ? void 0 : _modelConfig$Skin6.name) && /*#__PURE__*/_react.default.createElement(_Head.default, {
    modelConfig: modelConfig,
    opacity: 1,
    nodes: nodes,
    LOD: LOD
  })), /*#__PURE__*/_react.default.createElement("group", null)), /*#__PURE__*/_react.default.createElement("primitive", {
    object: nodes.Armature
  }))), (modelConfig === null || modelConfig === void 0 ? void 0 : modelConfig.Pet) && /*#__PURE__*/_react.default.createElement(_pet.default, _extends({}, model.current, {
    pet: modelConfig === null || modelConfig === void 0 ? void 0 : modelConfig.Pet
  })));
};

var _default = Player; // useGLTF.preload(`${characters.path}/main/${characters.base}`)

exports.default = _default;
const arrGM = ['Stang', 'JNBean', 'PakPkk'];

const EmotionBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  left: -20%;\n  @media (max-width: 943px) {\n    left: 0%;\n  }\n"])));

const BoxFlexChat = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\nwidth: 100%;\ndisplay: flex;\nflex-flow: column;\nalign-items: center;\njustify-content: center;\n"])));

const BoxChat = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\ntop:-30px;\nposition: absolute;\n  background-color: #fff;\n  color: #000;\n  padding: 0px 10px;\n  border-radius: 10px;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  -o-user-select: none;\n  user-select: none;\n  padding:2px 5px;\n  max-width:100px;\n  white-space: nowrap; \n  overflow: hidden;\n  text-overflow: ellipsis; \n  font-size:1rem;\n  &:after{\n    content: '';\n    position: fixed;\n    border: 10px solid transparent;\n    border-top: 10px solid #fff;\n    border-right: none;\n    bottom: 10px;\n    right: 50%;\n    z-index: 999;\n  }\n  @media (max-width: 943px) {\n    top:-25px;\n    &:after{\n      content: '';\n      position: fixed;\n      border: 10px solid transparent;\n      border-top: 10px solid #fff;\n      border-right: none;\n      bottom: 6px;\n      right: 50%;\n      z-index: 999;\n    }\n  }\n"])));

const BoxName = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  // background-color: #000000bf;\n  color: #fff;\n  padding: 0px 10px;\n  border-radius: 10px;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  -o-user-select: none;\n  user-select: none;\n  text-shadow: 1px 1px #000000;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  width: 5rem;\n  text-align: center;\n  font-size:16px;\n\n\n  ", ";\n\n@keyframes textclip {\n  to {\n    background-position: 200% center;\n  }\n}\n"])), p => arrGM.includes(p.name) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  text-transform: uppercase;\n  text-shadow: 1px 1px #fff;\n  background-image: linear-gradient(\n    -225deg,\n    #231557 0%,\n    #44107a 29%,\n    #ff1361 67%,\n    #fff800 100%\n  );\n  background-size: auto auto;\n  background-clip: border-box;\n  background-size: 200% auto;\n  color: #fff;\n  background-clip: text;\n  text-fill-color: transparent;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: textclip 2s linear infinite;\n  \n  \n  "]))));