import React, { Component, CSSProperties } from 'react';
import PropTypes from 'prop-types'; 

interface KaraokeLyricProps {
  text: string;
  percentage: number;
  fontStyle?: CSSProperties;
  activeStyle?: CSSProperties;
  wrapperStyle?: CSSProperties;
}

const defaultWrapperStyle: CSSProperties = {
  position: 'relative',
  display: 'inline-block',
};

const defaultFontStyle: CSSProperties = {
  whiteSpace: 'nowrap',
  fontSize: '50px',
  color: 'white',
  lineHeight: '50px',
  textShadow: '-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black',
};

const defaultActiveStyle: CSSProperties = {
  ...defaultFontStyle,
  position: 'absolute',
  left: 0,
  top: 0,
  color: 'blue',
  overflow: 'hidden',
  zIndex: 1,
  textShadow: '-2px 0 white, 0 2px white, 2px 0 white, 0 -2px white',
};

class KaraokeLyric extends Component<KaraokeLyricProps> {
  render() {
    const { percentage, text, wrapperStyle, fontStyle, activeStyle } = this.props;

    const updatedWrapperStyle: CSSProperties = wrapperStyle
      ? { ...defaultWrapperStyle, ...wrapperStyle }
      : defaultWrapperStyle;

    const updatedFontStyle: CSSProperties = fontStyle
      ? { ...defaultFontStyle, ...fontStyle }
      : defaultFontStyle;

    const updatedActiveStyle: CSSProperties = activeStyle
      ? { ...defaultActiveStyle, ...activeStyle, width: percentage + '%' }
      : { ...defaultActiveStyle, width: percentage + '%' };

    return (
      <div style={updatedWrapperStyle}>
        <div style={updatedFontStyle}>{text}</div>
        <div style={updatedActiveStyle}>{text}</div>
      </div>
    );
  }

  static propTypes = {
    text: PropTypes.string.isRequired,
    percentage: PropTypes.number.isRequired,
    fontStyle: PropTypes.object,
    activeStyle: PropTypes.object,
    wrapperStyle: PropTypes.object,
  };
}

export default KaraokeLyric;