import React, { memo } from 'react';
import logo from 'editorAssets/hiHouse/图片魔方-120x120.png';
import withLogo from 'editorUtils/withLogo';
import { PhotoCube as Component } from 'lwj-mobile-ui';
import 'lwj-mobile-ui/dist/styles/components/PhotoCube.scss';
import { useAutosize } from '../hooks/useAutosize';

interface IPhotoCubeProps {}

const PhotoCube: React.FC<React.ComponentProps<typeof Component>> = memo((props) => {
  const { containerRef, updateHeightWhenDomMounted } = useAutosize([props.template, props.imgList]);
  return (
    <div className="photo-cube-editor-container" ref={containerRef}>
      <Component handleOnLoad={updateHeightWhenDomMounted} {...props} />
    </div>
  );
});

export default withLogo(PhotoCube, logo);