import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { useEffect, useRef, useState } from 'react';
import { useResizeObserver } from 'usehooks-ts';

import Button from '@/components/button/Button';

const contextualBarAppear = keyframes`
  from {
    transform: translateX(-50%) translateY(-5px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0px) scale(1);
    opacity: 1;
  }
`;

const glowEffectFlourish = keyframes`
  0% {
    opacity: 0;
  }
  10% {
    opacity: .5
  }
  100% {
    opacity: 0;
  }
`;

const PositionerWrapper = styled.div`
  transform: translateX(-50%) translateY(0px) scale(1);
  &.visible {
    animation: ${contextualBarAppear} 0.2s cubic-bezier(0, 0.3, 0.4, 1) both;
  }
  position: absolute;
  bottom: 50px;
  left: 50%;
  z-index: 1001;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  &.sub-lg .hide-sub-lg {
    display: none;
  }
  &.sub-md .hide-sub-md {
    display: none;
  }
  .glow-effect {
    position: absolute;
    z-index: -1;
    top: -10px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    animation: ${glowEffectFlourish} 1.5s ease-in-out both;
  }
`;

const ContentWrapper = styled.div`
  position: relative;
  z-index: 1;
`;

const getClassName = (width: number) => {
  if (width < 640) return 'sub-lg sub-md';
  if (width < 780) return 'sub-lg';
  return '';
};

let hasAnyPositionerWaited = false;

export const Positioner = ({
  children,
  setWidthClass,
  withGlowEffect = false,
}: {
  children: React.ReactNode;
  setWidthClass?: (className: string) => void;
  withGlowEffect?: boolean;
}) => {
  const [hasWaited, setHasWaited] = useState(hasAnyPositionerWaited);
  const wasFirstRender = useRef(!hasWaited);
  const wrapperRef = useRef<HTMLDivElement>(null);
  const { width = 0 } = useResizeObserver({
    ref: wrapperRef as any,
    box: 'border-box',
  });
  const className = getClassName(width);
  useEffect(() => {
    setWidthClass?.(className);
  }, [hasWaited, className, setWidthClass]);
  useEffect(() => {
    const timeout = setTimeout(() => {
      setHasWaited(true);
      hasAnyPositionerWaited = true;
    }, 500);
    return () => clearTimeout(timeout);
  }, []);
  if (!hasWaited)
    return <PositionerWrapper ref={wrapperRef} className={className} />;
  return (
    <PositionerWrapper ref={wrapperRef} className={`${className} visible`}>
      <ContentWrapper>
        {children}
        {(withGlowEffect || wasFirstRender.current) && (
          // eslint-disable-next-line -- @sam fix this
          <div className='glow-effect rounded-full bg-gradient-to-r from-red-500 via-purple-500 to-orange-400 blur-2xl' />
        )}
      </ContentWrapper>
    </PositionerWrapper>
  );
};

export const Wrapper = styled.div<{ vertical?: boolean }>`
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 27px;
  padding: 7px;
  box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.3);
  min-height: 54px;
  display: flex;
  flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
  align-items: center;
  justify-content: stretch;
  gap: 4px;
`;

export const MainButton = styled(Button)`
  white-space: nowrap;
  width: 120px;
  ${({ disabled }) => disabled && 'cursor: default;'}
`;

export const InstrumentPickerButton = styled(Button)`
  white-space: nowrap;
  height: 40px;
  .sub-lg & .button-label {
    display: none;
  }
`;
export const DisabledMessage = styled.div`
  color: var(--color-foreground-inactive);
  font-size: 14px;
  padding: 0 16px;
`;