import * as React from 'react';
import { FC } from 'react';
import { style, keyframes } from 'typestyle';

interface NextIndicatorProps {
  direction?: 'horizontal' | 'vertical';
  /**
   * Optional CSS value that overrides the default `bottom` offset of the vertical indicator.
   */
  bottomOffset?: string;
}

const NextIndicator: FC<NextIndicatorProps> = ({ direction = 'horizontal', bottomOffset }) => {
  const color = 'white';
  const strokeW = '3';
  const sz = 52;

  if (direction === 'vertical') {
    return (
      <div className={styles.nextContainerVertical(bottomOffset)}>
        <div className={styles.nextIndicatorVertical(color)}>
          {/* First chevron-down */}
          <svg viewBox='0 0 24 24' width={sz} height={sz} aria-hidden='true'>
            <path
              d='M6 9l6 6 6-6'
              stroke={color}
              strokeWidth={strokeW}
              fill='none'
              strokeLinecap='round'
              strokeLinejoin='round'
            />
          </svg>
          {/* Second chevron-down */}
          <svg viewBox='0 0 24 24' width={sz} height={sz} aria-hidden='true' style={{ marginTop: -28 }}>
            <path
              d='M6 9l6 6 6-6'
              stroke={color}
              strokeWidth={strokeW}
              fill='none'
              strokeLinecap='round'
              strokeLinejoin='round'
            />
          </svg>
        </div>
      </div>
    );
  }

  return (
    <div className={styles.nextContainer}>
      <div className={styles.nextIndicator(color)}>
        {/* First chevron-right */}
        <svg viewBox='0 0 24 24' width={sz} height={sz} aria-hidden='true'>
          <path
            d='M9 6l6 6-6 6'
            stroke={color}
            strokeWidth={strokeW}
            fill='none'
            strokeLinecap='round'
            strokeLinejoin='round'
          />
        </svg>
        {/* Second chevron-right */}
        <svg viewBox='0 0 24 24' width={sz} height={sz} aria-hidden='true' style={{ marginLeft: -28 }}>
          <path
            d='M9 6l6 6-6 6'
            stroke={color}
            strokeWidth={strokeW}
            fill='none'
            strokeLinecap='round'
            strokeLinejoin='round'
          />
        </svg>
      </div>
    </div>
  );
};

export default NextIndicator;

const floatHorizontal = keyframes({
  '0%':   { transform: 'translateX(0px)' },
  '50%':  { transform: 'translateX(8px)' },
  '100%': { transform: 'translateX(0px)' },
});

const floatVertical = keyframes({
  '0%':   { transform: 'translateY(0px)' },
  '50%':  { transform: 'translateY(8px)' },
  '100%': { transform: 'translateY(0px)' },
});

const styles = {
  /* ---- Horizontal (default) ---- */
  nextContainer: style({
    position: 'absolute',
    top: '50%',
    right: 24,
    transform: 'translateY(-50%)',
    display: 'flex',
    justifyContent: 'center',
    width: 'auto',
    zIndex: 10,
  }),

  nextIndicator: (color: string) => style({
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    color: color,
    opacity: 0.75,
    animation: `${floatHorizontal} 2.5s ease-in-out infinite`,
  }),

  /* ---- Vertical ---- */
  nextContainerVertical: (bottomOffset?: string) => style({
    position: 'absolute',
    bottom: bottomOffset ?? 80,
    left: '50%',
    transform: 'translateX(-50%)',
    display: 'flex',
    justifyContent: 'center',
    width: 'auto',
    zIndex: 10,
    transition: 'bottom 0.3s ease-in-out',
  }),

  nextIndicatorVertical: (color: string) => style({
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    color: color,
    opacity: 0.75,
    animation: `${floatVertical} 2.5s ease-in-out infinite`,
  }),
};
