import React from 'react';
import { observer } from 'mobx-react';
import { CSSProperties, css, keyframes } from 'glamor';
import { ApphouseComponent } from '../components/component.interfaces';
import { useLocalStyles } from '../styles/defaults/useLocalStyles';
import { useApphouse } from '..';
import { setAlpha } from '../utils/color/setAlpha';

const animation = keyframes({
  '0%': {
    backgroundPosition: '0%'
  },

  '50%': {
    backgroundPosition: '400%'
  },

  '100%': {
    backgroundPosition: '0%'
  }
});
export interface AnimatedTextStyles {
  container?: CSSProperties;
  button?: CSSProperties;
  frontText?: CSSProperties;
  backText?: CSSProperties;
}

export interface AnimatedTextProps
  extends ApphouseComponent<AnimatedTextStyles> {
  text: React.ReactNode;
  /**
   * The font family to use.
   * @default 'inherit' which means it will inherit the font family from the parent.
   */
  fontFamily?: string;
  /**
   * If true, it will transform the text to uppercase.
   * @default false
   */
  uppercase?: boolean;
  /**
   * The font size to use.
   */
  fontSize?: string;
  /**
   * The color of the outlined text
   * @default onPrimary, 90%
   */
  textColor?: boolean;
  /**
   * The color of the mask text
   * @default brand
   * @example 'linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4)'
   */
  maskColor?: string;
}

export const AnimatedText: React.FC<AnimatedTextProps> = observer((props) => {
  const { theme } = useApphouse();
  const {
    styleOverwrites,
    text,
    uppercase = false,
    fontFamily = 'inherit',
    textColor = setAlpha(theme.colors.onPrimary, 0.4),
    maskColor = theme.colors.brand
  } = props;

  const strokeColor = textColor;
  const aniColor = 'rgba(95, 3, 244, 0)';
  const colorGar = maskColor;
  const componentStyles: AnimatedTextStyles = {
    container: {
      position: 'relative'
    },
    button: {
      margin: 0,
      padding: 0,
      position: 'relative',
      border: 'none',
      background: 'transparent',
      letterSpacing: '3px',
      fontSize: '2em',
      fontFamily: fontFamily ? fontFamily : 'Arial',
      textTransform: uppercase ? 'uppercase' : 'none',
      color: 'transparent',
      WebkitTextStroke: `1px ${strokeColor}`,
      cursor: 'pointer',
      ':hover .apphouse-front-text': {
        width: '100%',
        WebkitTextStroke: `1px ${aniColor}`
      }
    },
    frontText: {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '0%',
      background: colorGar,
      WebkitBackgroundClip: 'text',
      backgroundClip: 'text',
      backgroundSize: '200%',
      overflow: 'hidden',
      transition: 'all 1s',
      animation: `8s ${animation} infinite`
    }
  };
  const localStyles = useLocalStyles<AnimatedTextStyles>(
    componentStyles,
    styleOverwrites
  );
  return (
    <div data-xray="AnimatedText" {...css(localStyles.container)}>
      <button {...css(localStyles.button)}>
        <span className="apphouse-actual-text">{text}</span>
        <span
          aria-hidden="true"
          className="apphouse-front-text"
          {...css(localStyles.frontText)}
        >
          {text}
        </span>
      </button>
    </div>
  );
});