import * as React from "react";
import { useEffect, useRef, useState, memo } from "react";
import { BottomOptionsContainer, IconOptionContainer } from "./styled";
import Icon from "react-native-vector-icons/MaterialIcons";
import { Animated, Easing } from "react-native";

const share = <Icon name="share" size={25} color="black" />;
const info = <Icon name="info" size={25} color="black" />;
const exit = <Icon name="clear" size={25} color="black" />;
const minimize = <Icon name="arrow-drop-up" size={30} color="black" />;
const maximize = <Icon name="arrow-drop-down" size={30} color="black" />;
export type BottomOptionsProps = {
  show: boolean;
  onShare: () => void;
  onInfo: () => void;
  onExit: () => void;
  onMinimize: () => void;
  isMinimized: boolean;
};

function BottomOptions({
  onExit,
  onInfo,
  onMinimize,
  onShare,
  show,
  isMinimized,
}: BottomOptionsProps) {
  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 ? 50 : 0,
        duration: 200,
        easing: Easing.bezier(0.16, 1, 0.3, 1),
      }),
    ]).start(() => {
      if (!show) setActiveAnimation(false);
    });
  }, [show]);

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

  return (
    <BottomOptionsContainer style={{ height: heightAnimation }}>
      <IconOptionContainer onPress={onShare}>{share}</IconOptionContainer>
      <IconOptionContainer onPress={onInfo}>{info}</IconOptionContainer>
      <IconOptionContainer onPress={onExit}>{exit}</IconOptionContainer>
      <IconOptionContainer
        onPress={onMinimize}
        style={{ marginLeft: "auto", display: "flex" }}
      >
        {isMinimized ? maximize : minimize}
      </IconOptionContainer>
    </BottomOptionsContainer>
  );
}

export default memo(BottomOptions);