import * as React from "react";
import { useRef, useState, useEffect } from "react";
import { VideoItem } from "../video/video";
import { InfoPannelContainer, ClosePanelContainer } from "./styled";
import { SiteImage } from "../site-image";
import Typography from "../ui/typography";
import { useThemeProvider } from "../../providers/theme-provider";
import { Animated, Easing } from "react-native";

export type InfoPanelProps = {
  videoData: VideoItem;
  show: boolean;
  onClose: () => void;
};

function InfoPanel({ videoData, show, onClose }: InfoPanelProps) {
  const {
    theme: {
      color: { primary },
    },
  } = useThemeProvider();

  const opacityAnimation = useRef(new Animated.Value(0)).current;
  const scaleAnimation = useRef(new Animated.Value(1.1)).current;
  const [activeAnimation, setActiveAnimation] = useState(false);
  useEffect(() => {
    setActiveAnimation(true);
    Animated.parallel([
      Animated.timing(opacityAnimation, {
        useNativeDriver: true,
        toValue: show ? 1 : 0,
        duration: 200,
        easing: Easing.bezier(0.16, 1, 0.3, 1),
      }),
      Animated.timing(scaleAnimation, {
        useNativeDriver: true,
        toValue: show ? 1 : 1.1,
        duration: 200,
        easing: Easing.bezier(0.16, 1, 0.3, 1),
      }),
    ]).start(() => {
      if (!show) setActiveAnimation(false);
    });
  }, [show]);

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

  return (
    <InfoPannelContainer
      style={{
        opacity: opacityAnimation,
        transform: [{ scale: scaleAnimation }],
      }}
    >
      <ClosePanelContainer
        onPress={onClose}
        style={{ backgroundColor: primary }}
        activeOpacity={0.8}
      >
        <Typography variant="title4" align="center" color="white">
          Close panel
        </Typography>
      </ClosePanelContainer>
      <SiteImage
        src={videoData.renderer.thumbnail}
        resizeMethod="resize"
        style={{ width: "100%", aspectRatio: 16 / 9 }}
        fit
      />
      <Typography variant="body1" style={{ padding: 25 }}>
        {videoData.renderer.name}
      </Typography>
    </InfoPannelContainer>
  );
}

export default InfoPanel;