import React, { memo } from 'react';
import Animation from './Animation';
import Components from './Components';
import Transition from './Transition';
import { getTransformStyle } from 'utils/interaction';

function Group({
  edit,
  id,
  components,
  width,
  height,
  top,
  left,
  show,
  iState,
  iActiveState,
  movable,
  dynamicLeft,
  dynamicTop,
  topOffset = 0,
  leftOffset = 0,
  transitionTime = 0,
  transitionDelay = 0,
  transitionTimingFunction = 'linear',
  opacity = 1,
  hideDefault,
  transform = {},
  mountAnimation = {},
  parentScreens,
  screenId
}: {
  edit: boolean;
  id: string;
  components: any[];
  width: number;
  height: number;
  top: number;
  left: number;
  show: boolean;
  iState: any;
  iActiveState: any;
  movable: boolean;
  dynamicLeft: number | null;
  dynamicTop: number | null;
  topOffset: number;
  leftOffset: number;
  transitionTime: number;
  transitionDelay: number;
  transitionTimingFunction: string;
  opacity: number;
  hideDefault: boolean;
  transform: any;
  mountAnimation: any;
  parentScreens: any[];
  screenId: number;
}) {
  let realLeft = movable ? (dynamicLeft != null ? dynamicLeft + leftOffset : null) : left;
  let realTop = movable ? (dynamicTop != null ? dynamicTop + topOffset : null) : top;
  let posError = false;
  if (realLeft == null || realTop == null || isNaN(realLeft) || isNaN(realTop)) {
    posError = true;
    realLeft = left;
    realTop = top;
  }
  let defaultState = {
    show: hideDefault ? false : true
  };

  const { open, type = 'custom', perspective = 500, perspectiveOrigin = [0.5, 0.5] } = transform;
  const transformStyle: any = getTransformStyle(transform, iState, iActiveState, { left: realLeft, top: realTop });
  const perspectiveStyle =
    (open && type === 'custom') || iState?.rotate
      ? { perspective: perspective, perspectiveOrigin: `${perspectiveOrigin[0] * 100}% ${perspectiveOrigin[1] * 100}%` }
      : {};

  return (
    <Transition config={mountAnimation}>
      <Animation
        id={id}
        iState={iState ? iState : defaultState}
        iActiveState={iActiveState}
        width={width}
        height={height}
        left={realLeft}
        top={realTop}>
        <div style={{ position: 'absolute', width, height, left: realLeft, top: realTop, ...perspectiveStyle }}>
          <div
            id={id}
            className="__easyv-group"
            style={{
              opacity: opacity === 1 ? undefined : opacity,
              position: 'absolute',
              display: posError ? 'none' : 'block',
              width,
              height,
              pointerEvents: edit ? 'auto' : 'none',
              transition: edit ? null : `all ${transitionTimingFunction} ${transitionTime}s ${transitionDelay}s`,
              ...transformStyle
            }}>
            <div style={{ position: 'absolute', left: -left, top: -top }}>
              <Components layers={components} edit={edit} parentScreens={parentScreens} screenId={screenId} show={show} />
            </div>
          </div>
        </div>
      </Animation>
    </Transition>
  );
}

export default memo(Group);
