import { css } from 'glamor';
import { AiOutlineWarning } from 'react-icons/ai';
import { BsLightningCharge } from 'react-icons/bs';
import { useState } from 'react';
import { observer } from 'mobx-react-lite';
import { useApphouse } from '../../context/useApphouse';
import { setAlpha } from '../../utils/color/setAlpha';

interface ProTipProps {
  text: string;
  icon?: any;
  variant?: 'warning' | 'tip';
  children?: React.ReactNode;
}

export const ProTip: React.FC<ProTipProps> = observer(
  ({ text, icon, variant, children }) => {
    const [hide, setHide] = useState<boolean>(false);
    const { theme } = useApphouse();
    const { styles, colors, tokens } = theme;
    const isWarning = variant === 'warning';
    if (hide) {
      return null;
    }
    return (
      <div
        data-id="ProTip"
        {...css(styles.layout?.horizontal, {
          padding: tokens.spacings.m,
          borderRadius: tokens.radius.default,
          maxWidth: '300px',
          backgroundColor: isWarning
            ? setAlpha(colors.warning, 0.1)
            : setAlpha(colors.surface, 0.3)
        })}
      >
        {icon && icon}
        {isWarning && !icon && (
          <span {...css({ color: colors.warning })}>
            <AiOutlineWarning />
          </span>
        )}
        {variant === 'tip' && !icon && (
          <span {...css({ color: colors.warning })}>
            <BsLightningCharge />
          </span>
        )}
        <p {...css(styles.typography.caption)}>
          {text} {children}
        </p>
        {isWarning && (
          <button {...css(styles.button.clear)} onClick={() => setHide(true)}>
            Dismiss
          </button>
        )}
      </div>
    );
  }
);