import React, { useEffect } from 'react';
import { DEFAULT_LANGUAGE } from 'src/forms/_resources/utils/formConstants';
import { PrimaryButtonDark } from 'src/components';
import { ReferralFormContainer } from '../patientReferralForm/container';
import { ReferralTextInputComponent } from '../patientReferralForm/textInput';
import useStudentReferralHooks from 'src/forms/_resources/hooks/student-referral-form';
import { PageFormMessage, PageFormWrapper, FlexWrap } from '../patientReferralForm/referral.styles';
import {useRouter} from 'next/router';
import { ReferralCaptcha } from '../patientReferralForm';
import { HeaderBlock, HeaderBackgroundWrap } from './studentRefeferralForm.styles';
import { ContentDescription, ContentTitle } from '../heroCarousel/heroCarousel.styles';
import { StudentDetails } from './studentDetetail';
import { SchoolSelection } from './schoolLookup';

export const STUDENT_REFERRAL_TEXT_NAME = 'Page_Sections_layout_Content_StudentReferralForm';

export const STUDENT_REFERRAL_TEXT_QUERY = `
  ${STUDENT_REFERRAL_TEXT_NAME} {
    introTitleEn
    introTitleSp
    introDescriptionEn
    introDescriptionSp
  }
`;

interface StudentReferralFormProps {
  introTitleEn: string;
  introTitleSp: string;
  introDescriptionEn: string;
  introDescriptionSp: string;

  setCaptcha: any;
  setCaptchaMatch: any;
  setCaptchaImage: any;
  setOops: any;
  setReferralError: any;
  setApiSuccess: any;
  setReferralResults: any;
  errorReset: any;
  addCaptchaInput: any;
  addReferralData: any;
  submitStudentReferral: any;
}

export const ReferStudent: React.FC<StudentReferralFormProps> = ({
  introTitleEn,
  introTitleSp,
  introDescriptionEn,
  introDescriptionSp
}) => {
  const {locale} = useRouter();
  const userLocale = locale || DEFAULT_LANGUAGE;
  const title = locale === 'en' ? introTitleEn : introTitleSp;
  const description = locale === 'en' ? introDescriptionEn : introDescriptionSp;

  const {
    admin,
    students,
    apiSuccess,
    referralError,
    oops,

    errorReset,
    setSchoolId,
    updateAdmin,
    addStudent,
    updateStudent,
    removeStudent,
    submitStudentReferral,
  } = useStudentReferralHooks();

  useEffect(() => {
    errorReset();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps


  if (oops) {
    return (
      <PageFormWrapper>
        <PageFormMessage>
          <h2>Sorry we’re unable to process your request online. Please call us at 858-300-1023.</h2>
        </PageFormMessage>
      </PageFormWrapper>
    );
  }

  if (apiSuccess) {
    return (
      <PageFormWrapper>
        <PageFormMessage>
          <h2>Thank you for your submission!</h2>
          <p>Thank you for referring your student{students.length > 1 && 's'} to Kick It California. A Quit Coach will contact your student{students.length > 1 && 's'} soon.</p>
        </PageFormMessage>
      </PageFormWrapper>
    );
  }

  return (
    <PageFormWrapper> 

      <HeaderBackgroundWrap>
        <HeaderBlock>
          <ContentTitle>{title}</ContentTitle>
          <ContentDescription>{description}</ContentDescription>
        </HeaderBlock>
      </HeaderBackgroundWrap>

      {/* SCHOOL ADMINISTRATOR */}
      <ReferralFormContainer fullwidth title="School Administrator Information">
        {/* First, Last, Email, Phone, School Name, District, County, CDS Code */}
        <FlexWrap>
          <ReferralTextInputComponent
            full
            labelName="First Name"
            propKey="first_name"
            value={admin.firstName}
            onChange={ evt => updateAdmin({firstName: evt.target.value}) }
          />

          <ReferralTextInputComponent
            full
            labelName="Last Name"
            propKey="last_name"
            value={admin.lastName}
            onChange={evt => updateAdmin({ lastName: evt.target.value }) }
          />
        </FlexWrap>

        <FlexWrap>
          <ReferralTextInputComponent
            full
            labelName="Email"
            propKey="email"
            value={admin.email}
            type="email"
            onChange={evt => updateAdmin({ email: evt.target.value }) }
          />

          <ReferralTextInputComponent
            full
            labelName="Phone Number"
            propKey="phone"
            value={admin.phone}
            type="tel"
            onChange={evt => updateAdmin({ phone: evt.target.value })}
          />
        </FlexWrap>
        
        <SchoolSelection onSchoolSelected={(schoolID: number) => setSchoolId(schoolID) } />

      </ReferralFormContainer>

      {/* STUDENT INFORMATION */}
      {students.map((student, index) => {
        return (<StudentDetails key={index} student={student} index={index} updateStudent={updateStudent} totalStudents={students.length} onRemove={() => {removeStudent(index)} } />);
      })}

      <FlexWrap>
        <PrimaryButtonDark disabled={students.length==5} onClick={addStudent}>Add Student</PrimaryButtonDark>
        {students.length == 5 &&
          <p style={{color: 'red', margin: '0 0 0 25px'}}>You have reached the max number of students you can submit at one time.<br/>Please click below to submit these students and repeat the process to add more.</p> 
        }
      </FlexWrap>

      <div style={{display: 'block', padding: '10px', width: '100%', height: '20px'}}></div>

      {/* CAPTCHA */}
      <ReferralCaptcha
        codeTitleEn="Verify"
        codeTitleSp="Verify"
        submitEn="Submit"
        submitSp="Submit"
        locale={userLocale}
        referralError={referralError}
        submitPatientReferral={submitStudentReferral}
      />

      <p>Kick It California (formerly California Smokers' Helpline) offers free services to help California students (ages 13 or older) quit vaping, smoking or using other tobacco. Services are offered in English, Spanish, Mandarin, Cantonese, Korean, and Vietnamese.</p>
      <p>Kick It California complies with applicable Federal civil rights laws and does not discriminate on the basis of race, color, national origin, age, disability, or sex.</p>

    </PageFormWrapper>
  );
};

export default ReferStudent;