import { useEffect, useState } from 'react';

import { styled, useTheme } from '@mui/material';
import { IconArrowBigRightLine } from '@tabler/icons-react';

import useIsMount from '../../../../../hooks/useIsMount';

import { type AnimatedArrowIconProps, type AnimatedIconProps } from './types';
import {
  getAnimation,
  getAnimationState,
  getRotate,
  shouldForwardProp,
} from './utils';

const AnimatedIcon = styled(IconArrowBigRightLine, {
  shouldForwardProp,
})<AnimatedIconProps>`
  transform-origin: center;
  rotate: ${getRotate};
  animation: ${getAnimation} 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-play-state: ${getAnimationState};
`;

const AnimatedArrowIcon = ({ isCollapsed }: AnimatedArrowIconProps) => {
  const [animationDisabled, setAnimationDisabled] = useState(true);
  const isMount = useIsMount();

  const { palette } = useTheme();

  useEffect(() => {
    if (!isMount) setAnimationDisabled(false);
  }, [isCollapsed]);

  return (
    <AnimatedIcon
      color={palette.new.text.neutral.brand}
      isCollapsed={isCollapsed}
      animationDisabled={animationDisabled}
    />
  );
};

export default AnimatedArrowIcon;
