import * as React from "react";
import { useRef, useState, useEffect, memo } from "react";
import { View, Animated, Easing, Alert } from "react-native";
import { VideoPlayerModalContainer, VideoPlayerContainer } from "./styled";
import BottomOptions from "./bottom-options";
import { VideoPlayer } from "../video";
import { VideoItem } from "../video/video";
import ShareStackIcon from "../share-stack-icon";
import InfoPanel from "./info-panel";
import VideoPremiumBlocker from "../video-premium-blocker";
import { useVideoPlayerCollapse } from "./hooks/use-video-collapse";

export type VidepPlayerCollapsePropsBase = {
  show: boolean;
  data?: VideoItem | undefined;
  onShowBottomOptions: () => void;
  showBottomOptions: boolean;
  onHiddeBottomOptions: () => void;
  onCloseVideo: () => void;
  onMinimize: () => void;
  isMinimized: boolean;
  onOpenShareOptions: () => void;
  isShareOptionsOpened: boolean;
  onSwitchInfo: () => void;
  isOpenInfo: boolean;
};

function VidepPlayerCollapse({
  data,
  show,
  isMinimized,
  isOpenInfo,
  isShareOptionsOpened,
  onCloseVideo,
  onHiddeBottomOptions,
  onMinimize,
  onSwitchInfo,
  onOpenShareOptions,
  onShowBottomOptions,
  showBottomOptions,
}: VidepPlayerCollapsePropsBase) {
  const timeout = useRef<any>();
  const bottomTimeout = useRef<any>();
  const heightAnimation = useRef(new Animated.Value(0)).current;
  const [activeAnimation, setActiveAnimation] = useState(false);

  useEffect(() => {
    setActiveAnimation(true);

    Animated.parallel([
      Animated.timing(heightAnimation, {
        useNativeDriver: false,
        toValue: show && !isMinimized ? 220 : 0,
        duration: 300,
        easing: Easing.bezier(0.16, 1, 0.3, 1),
      }),
    ]).start(() => {
      if (!show) setActiveAnimation(false);
    });
  }, [show, isMinimized]);

  useEffect(() => {
    if (showBottomOptions)
      bottomTimeout.current = setTimeout(onHiddeBottomOptions, 5000);
  }, [showBottomOptions]);

  if (!show && !activeAnimation) return null;

  return (
    <View style={{ overflow: "visible", position: "relative" }}>
      <Animated.View
        style={{
          height: heightAnimation,
          overflow: "hidden",
        }}
      >
        <VideoPlayerModalContainer>
          <VideoPlayerContainer
            activeOpacity={1}
            onPress={() => {
              clearTimeout(timeout.current);
              if (isShareOptionsOpened)
                timeout.current = setTimeout(onOpenShareOptions, 5000);
              onShowBottomOptions();
            }}
          >
            {show && data && data.renderer?.subscriptions ? (
              <VideoPremiumBlocker text={data.data.name} onPress={() => {}} />
            ) : (
              data && <VideoPlayer data={data} />
            )}
          </VideoPlayerContainer>
        </VideoPlayerModalContainer>
      </Animated.View>
      {isShareOptionsOpened && (
        <ShareStackIcon
          icons={[
            { icon: "facebook", background: "#3b5998", color: "white", data },
            { icon: "twitter", background: "#00aced", color: "white", data },
            {
              icon: "link-variant",
              background: "#51bfe2",
              color: "white",
              data,
            },
            { icon: "image-area", background: "#c8c9c7", color: "white", data },
          ]}
        />
      )}

      <BottomOptions
        isMinimized={isMinimized}
        show={(showBottomOptions && show) || isMinimized}
        onExit={onCloseVideo}
        onInfo={onSwitchInfo}
        onShare={onOpenShareOptions}
        onMinimize={onMinimize}
      />
      {data && (
        <InfoPanel onClose={onSwitchInfo} show={isOpenInfo} videoData={data} />
      )}
    </View>
  );
}

export type VideoPlayerCollapseProps = {
  video?: VideoItem;
  open: boolean;
  onClose: () => void;
};

export default memo((props: VideoPlayerCollapseProps) => {
  const { videoPlayerModal } = useVideoPlayerCollapse(props);
  return <VidepPlayerCollapse {...videoPlayerModal} />;
});
// <VideoPlayer disableControls={!show || isMinimized} url={url} />