import './StripeConnectBox.scss'
import React, { useEffect, useState } from 'react'
import { Text } from 'components/Typography'
import StripeConnectButton from 'components/StripeConnectButton'
import { useTypedSelector } from 'redux/rootReducer'
import { selectPayoutError, selectPayoutSchedule } from 'redux/Payout/selector'
import { selectUserData } from 'redux/User/selector'
import { Icon } from 'components/Icon'
import classNames from 'classnames'

interface IProps {
  className?: string
}

const StripeConnectBox: React.FC<IProps> = ({ className }) => {
  const user = useTypedSelector(selectUserData)
  const payoutSchedule = useTypedSelector(selectPayoutSchedule)
  const payoutScheduleError = useTypedSelector(selectPayoutError)
  const [showWarningStripe, setShowWarningStripe] = useState(false)

  useEffect(() => {
    if (!user) return
    if (
      user.isConnectedStripeAccount &&
      payoutSchedule &&
      payoutSchedule.payoutsEnabled &&
      payoutSchedule.payoutsEnabled
    ) {
      setShowWarningStripe(false)
    } else if (
      payoutScheduleError ||
      (user.isConnectedStripeAccount &&
        payoutSchedule &&
        !payoutSchedule.payoutsEnabled) ||
      (user.isConnectedStripeAccount &&
        payoutSchedule &&
        !payoutSchedule.paymentEnabled)
    ) {
      setShowWarningStripe(true)
    }
  }, [user, payoutSchedule, payoutScheduleError])

  return (
    <React.Fragment>
      {showWarningStripe && (
        <div
          className={classNames({
            'stripe-connect-card': true,
            [className || '']: true
          })}
        >
          <div className="stripe-connect-card__icon--wrapper">
            <Icon name="warning" />
          </div>
          <div className="stripe-connect-card__content">
            <Text preset="regular16" className="d--block">
              You need to setup your payout information so that your fans can
              purchase from you
            </Text>
            <StripeConnectButton
              className="stripe-connect-card__btn-connect"
              windownTarget="_blank"
              hideIcon
            />
          </div>
        </div>
      )}
    </React.Fragment>
  )
}

export default StripeConnectBox
