import React, { useState, useEffect } from 'react';
import { DropdownSelect } from 'src/components';
import { ReferralFormContainer } from '../patientReferralForm/container';
import { ReferralTextInputComponent } from '../patientReferralForm/textInput';
import { ReferralInputContainer, ReferralInputLabel, FlexWrap } from '../patientReferralForm/referral.styles';
import { RemoveLink } from './studentRefeferralForm.styles';

export const CheckboxInput: React.FC<{checked: boolean; onChange: any; value: string}> = ({
    checked,
    onChange,
    value
}) => {
    return (
        <div style={{ display: 'flex', alignItems: 'center' }}>
            <input type="checkbox" name="consent" checked={checked} onChange={onChange} />
            <label htmlFor="consent" style={{ marginLeft: '10px' }}>
                <h4>{value}</h4>
            </label>
        </div>
    );
};

export const StudentDetails: React.FC<{ student: any; index: number; totalStudents: any; updateStudent: any; onRemove: any; }> = ({
    student,
    index,
    totalStudents,
    updateStudent,
    onRemove
}) => {

    const [vapes, setVapes] = useState(false);
    const [cigarettes, setCigarettes] = useState(false);
    const [cigarillos, setCigarillos] = useState(false);
    const [smokeless, setSmokeless] = useState(false);
    const [hookah, setHookah] = useState(false);
    const [other, setOther] = useState(false);

    useEffect(() => {
        handleTobaccoCheck();
    }, [vapes, cigarettes, cigarillos, smokeless, hookah, other]); // eslint-disable-line react-hooks/exhaustive-deps


    /**
     * Toggle user's tobacco product selection
     * 
     * @param index 
     * @param value 
     */
    const handleTobaccoCheck = () => {
        let products = [];

        if (vapes)
            products.push('Vapes');
        if (cigarettes)
            products.push('Cigarettes');
        if (cigarillos)
            products.push('Cigarillos');
        if (smokeless)
            products.push('Smokeless');
        if (hookah)
            products.push('Hookah');
        if (other)
            products.push('Other Products');

        updateStudent(index, { tobaccoProducts: products });
    };

    return (
        <ReferralFormContainer fullwidth title="Student Information">            
        
            {totalStudents > 1 &&
            <RemoveLink onClick={onRemove}>Remove Student</RemoveLink>}

            {/* First, Last, Email, Phone, Tobacco Products */}
            <FlexWrap>
                <ReferralTextInputComponent
                    full
                    labelName="Student First Name"
                    propKey="student_first_name"
                    value={student.firstName}
                    onChange={evt => updateStudent(index, { firstName: evt.target.value })}
                />
                <ReferralTextInputComponent
                    full
                    labelName="Student Last Name"
                    propKey="student_last_name"
                    value={student.lastName}
                    onChange={evt => updateStudent(index, { lastName: evt.target.value })}
                />
            </FlexWrap>

            <FlexWrap>
                <ReferralTextInputComponent
                    full
                    labelName="Email"
                    propKey="student_email"
                    value={student.email}
                    type="email"
                    onChange={evt => updateStudent(index, { email: evt.target.value })}
                />

                <ReferralTextInputComponent
                    full
                    labelName="Phone Number"
                    propKey="student_phone"
                    value={student.phone}
                    type="tel"
                    onChange={evt => updateStudent(index, { phone: evt.target.value })}
                />
            </FlexWrap>

            <FlexWrap>
                <ReferralInputContainer>
                    <ReferralInputLabel htmlFor='tobaccoProducts'>Tobacco Products*</ReferralInputLabel>
                    <CheckboxInput checked={vapes} onChange={() => { setVapes(!vapes); }} value="Vapes" />
                    <CheckboxInput checked={cigarettes} onChange={() => { setCigarettes(!cigarettes); }} value="Cigarettes" />
                    <CheckboxInput checked={cigarillos} onChange={() => { setCigarillos(!cigarillos); }} value="Cigarillos" />
                    <CheckboxInput checked={smokeless} onChange={() => { setSmokeless(!smokeless); }} value="Smokeless Tobacco" />
                    <CheckboxInput checked={hookah} onChange={() => { setHookah(!hookah); }} value="Hookah" />
                    <CheckboxInput checked={other} onChange={() => { setOther(!other); }} value="Other Products" />
                </ReferralInputContainer>

                <ReferralInputContainer>
                    <ReferralInputLabel htmlFor='language'>Primary Language*</ReferralInputLabel>
                    <DropdownSelect full defaultValue="English" items={["English", "Spanish", "Mandarin", "Cantonese", "Korean", "Vietnamese"]} handleSelectChange={evt => updateStudent(index, { language: evt.selectedItem })} />
                </ReferralInputContainer>
            </FlexWrap>

            <ReferralInputContainer>
                <h4>Student consents to:<br /><br />Allow the referring organization to share contact information with Kick It California (KICA) for the purpose of offering services (contact by phone, text, or email).</h4>
                <br />
                <CheckboxInput checked={student.isConsentChecked} onChange={() => updateStudent(index, { isConsentChecked: !student.isConsentChecked })} value="Yes, I Consent" />
            </ReferralInputContainer>
   
        </ReferralFormContainer>
    );
}