import React, { useState, useEffect, useRef } from 'react';
import { observer } from 'mobx-react';
import classNames from 'classnames/bind';
import SVGPlus from 'assets/svg/plus.svg';

import s from './OpportunityButton.module.scss';

const cn = classNames.bind(s);
interface IOpportunityButtonProps {
  id: string;
  label: string;
  description: string;
  icon: object;
  color: string;
  onClick(id: string): any;
  onDisplayed(id: string): any;
}

const OpportunityButton = ({
  id,
  label,
  description,
  icon,
  color,
  onClick,
  onDisplayed,
}: IOpportunityButtonProps) => {
  const [displayed, setDisplayed] = useState(false);

  const buttonRef = useRef(null);

  useEffect(() => {
    window.addEventListener('scroll', onScroll, true);
    displayButton();
    return () => {
      window.removeEventListener('scroll', onScroll, true);
    };
  });

  const onScroll = () => {
    displayButton();
  };

  const displayButton = () => {
    if (!displayed) {
      if (buttonRef && buttonRef.current.getBoundingClientRect().bottom < window.innerHeight) {
        setDisplayed(true);
        onDisplayed(id);
      }
    }
  };

  const onSelect = () => {
    onClick(id);
  };

  return (
    <button
      className={cn(s.opportunityButton, `color-${color}`)}
      onClick={onSelect}
      ref={buttonRef}
    >
      <span className={s.opportunityButton__icon}>{icon}</span>
      <span className={s.opportunityButton__text}>
        <span className={s.opportunityButton__label}>{label}</span>
        <span className={s.opportunityButton__description}>{description}</span>
      </span>
      <span className={s.opportunityButton__iconPlus}>
        <SVGPlus className={s.opportunityButton__svgPlus} />
      </span>
    </button>
  );
};

export default observer(OpportunityButton);