import React, {useCallback, useState} from 'react'
import PropTypes from 'prop-types'
import Button from 'react-uikit/button'
import Form from 'react-uikit/form'
import Icon from 'react-uikit/icon'
import TextInput from 'react-uikit/input-text'
import Intercom from 'global/clients/intercom'
import inputNames from 'common-fe/constants/input-names'
import styles from './styles.scss'
import BEMModule from 'utils/bem'

const bem = new BEMModule(styles)

const SponsorshipCode = ({
    course: {id: courseId, professor, school},
    user: {email},
}) => {
    const [isEmailSent, setIsEmailSent] = useState(false)
    const contactSupport = useCallback(
        () =>
            Intercom.openNewMessage(
                `Hi,\n\nI'm having trouble receiving my activation code for the following course: ${courseId}.\n\nPlease help me.`
            ),
        [courseId]
    )
    // TODO: Integrate the activation code email trigger once BE has an endpoint
    const sendActivationCode = useCallback(() => setIsEmailSent(true), [email])

    const id = 'sponsorship-code'
    const inputName = inputNames.COUPON_ID
    const headerClasses = bem.classNames(
        'c-portfolio-onboarding-form__sponsorship-code-header'
    )
    const labelClasses = bem.classNames(
        'c-portfolio-onboarding-form__sponsorship-code-label'
    )
    const inputClasses = bem.classNames(
        'c-portfolio-onboarding-form__sponsorship-code-input'
    )
    const emailStepClasses = bem.classNames(
        'c-portfolio-onboarding-form__sponsorship-code-email-step'
    )
    const emailClasses = bem.classNames(
        'c-portfolio-onboarding-form__sponsorship-code-email'
    )
    const emailFeedbackClasses = bem.classNames(
        'c-portfolio-onboarding-form__sponsorship-code-email__feedback'
    )
    const iconClasses = bem.classNames(
        'c-portfolio-onboarding-form__sponsorship-code-email__feedback-icon'
    )
    const resendClasses = bem.classNames(
        'c-portfolio-onboarding-form__sponsorship-code-resend'
    )
    const resendButtonClasses = bem.classNames(
        'c-portfolio-onboarding-form__sponsorship-code-resend__button'
    )
    const tipClasses = bem.classNames(
        'c-portfolio-onboarding-form__sponsorship-code-resend__button-tip'
    )
    const header = `${professor.firstName} ${professor.lastName} and ${school.name} sponsored you for a year of Pro on EquitySim!`

    return (
        <React.Fragment>
            <h1 className={headerClasses}>{header}</h1>

            <div className={emailStepClasses}>
                <label className={labelClasses}>
                    1. Send the activation code to
                </label>

                <div className={emailClasses}>
                    {email}

                    {isEmailSent && (
                        <span className={emailFeedbackClasses}>
                            <Icon className={iconClasses} name="check" />
                            Sent!
                        </span>
                    )}
                </div>
            </div>

            <div className={resendClasses}>
                <Button
                    className={resendButtonClasses}
                    variant="primary"
                    size="small"
                    text="Resend"
                    type="button"
                    onClick={sendActivationCode}
                />
                <span
                    className={tipClasses}
                    onClick={contactSupport}
                >{`Where’s my code?`}</span>
            </div>

            <label className={labelClasses} htmlFor={id}>
                2. Enter the activation code
            </label>

            <Form.Field
                className={inputClasses}
                id={id}
                name={inputName}
                render={TextInput}
                required
                size="small"
            />
        </React.Fragment>
    )
}

SponsorshipCode.propTypes = {
    course: PropTypes.shape({
        id: PropTypes.string.isRequired,
        professor: PropTypes.shape({
            firstName: PropTypes.string,
            lastName: PropTypes.string,
        }),
        school: PropTypes.shape({
            name: PropTypes.string,
        }),
    }).isRequired,
    user: PropTypes.shape({
        email: PropTypes.string,
    }).isRequired,
}

export default SponsorshipCode