import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
import Head from 'next/head'
import React, { ReactElement, useEffect, useState } from 'react'
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import dayjs from "dayjs";

import CardBox from '../../components/CardBox'
import LayoutAuthenticated from '../../layouts/Authenticated'
import SectionMain from '../../components/SectionMain'
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
import { getPageTitle } from '../../config'

import { Field, Form, Formik } from 'formik'
import FormField from '../../components/FormField'
import BaseDivider from '../../components/BaseDivider'
import BaseButtons from '../../components/BaseButtons'
import BaseButton from '../../components/BaseButton'
import FormCheckRadio from '../../components/FormCheckRadio'
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
import FormFilePicker from '../../components/FormFilePicker'
import FormImagePicker from '../../components/FormImagePicker'
import { SelectField } from "../../components/SelectField";
import { SelectFieldMany } from "../../components/SelectFieldMany";
import { SwitchField } from '../../components/SwitchField'
import {RichTextField} from "../../components/RichTextField";

import { update, fetch } from '../../stores/tutor_profiles/tutor_profilesSlice'
import { useAppDispatch, useAppSelector } from '../../stores/hooks'
import { useRouter } from 'next/router'
import {saveFile} from "../../helpers/fileSaver";
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from "../../components/ImageField";



const EditTutor_profiles = () => {
  const router = useRouter()
  const dispatch = useAppDispatch()
  const initVals = {
      
    

    

    

    

    

    

    

    

    

    

    

    
    user: null,
    

    
    
    
    'headline': '',
    

    

    

    

    

    

    

    

    

    

    

    

    
    
    

    

    

    

    

    

    

    

    
    teaching_type: '',
    

    

    

    

    
    
    
    'institution_name': '',
    

    

    

    

    

    

    

    

    

    

    

    

    
    
    
    'degree_qualification': '',
    

    

    

    

    

    

    

    

    

    

    

    

    
    
    

    

    

    
    graduation_year: '',
    

    

    

    

    

    

    

    

    

    
    
    

    

    

    

    

    

    

    

    

    

    

    

    
    subject_categories: [],
    
    
    

    

    

    

    

    

    

    

    

    

    

    

    
    subjects: [],
    
    
    

    

    

    

    

    

    

    

    

    

    

    

    
    languages: [],
    
    
    

    

    

    

    

    

    

    

    
    session_language: '',
    

    

    

    

    
    
    

    

    

    

    

    

    

    

    
    teaching_format: '',
    

    

    

    

    
    
    

    

    

    

    

    

    

    

    
    verification_status: '',
    

    

    

    

    
    
    

    

    

    

    

    

    

    

    

    
    verification_docs: [],
    

    

    

    
    
    

    
    verification_note: '',
    

    

    

    

    

    

    

    

    

    

    

    
    
    
    'rating': '',
    

    

    

    

    

    

    

    

    

    

    

    

    
    
    

    

    

    
    total_sessions: '',
    

    

    

    

    

    

    

    

    

    
    
    

    

    

    
    total_reviews: '',
    

    

    

    

    

    

    

    

    

    
    
    

    

    

    
    response_rate: '',
    

    

    

    

    

    

    

    

    

    
    
    

    

    

    
    response_time_hours: '',
    

    

    

    

    

    

    

    

    

    
    
    

    

    

    

    

    

    

    

    
    badge_level: '',
    

    

    

    

    
    
    

    

    

    

    

    

    
    vacation_mode: false,
    

    

    

    

    

    

    
    
    

    

    

    
    max_concurrent_bookings: '',
    

    

    

    

    

    

    

    

    

    
    
    
    'jitsi_meet_meeting_id': '',
    

    

    

    

    

    

    

    

    

    

    

    

    
    
    
    'jitsi_meet_password': '',
    

    

    

    

    

    

    

    

    

    

    

    

    
    
    

    
    availability_json: '',
    

    

    

    

    

    

    

    

    

    

    

    
    
    
  }
  const [initialValues, setInitialValues] = useState(initVals)

  const { tutor_profiles } = useAppSelector((state) => state.tutor_profiles)
  

  const { tutor_profilesId } = router.query

  useEffect(() => {
    dispatch(fetch({ id: tutor_profilesId }))
  }, [tutor_profilesId])

  useEffect(() => {
    if (typeof tutor_profiles === 'object') {
      setInitialValues(tutor_profiles)
    }
  }, [tutor_profiles])

  useEffect(() => {
      if (typeof tutor_profiles === 'object') {

          const newInitialVal = {...initVals};

          Object.keys(initVals).forEach(el => newInitialVal[el] = (tutor_profiles)[el])

          setInitialValues(newInitialVal);
      }
  }, [tutor_profiles])

  const handleSubmit = async (data) => {
    await dispatch(update({ id: tutor_profilesId, data }))
    await router.push('/tutor_profiles/tutor_profiles-list')
  }

  return (
    <>
      <Head>
        <title>{getPageTitle('Edit tutor_profiles')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit tutor_profiles'} main>
        {''}
        </SectionTitleLineWithButton>
        <CardBox>
          <Formik
            enableReinitialize
            initialValues={initialValues}
            onSubmit={(values) => handleSubmit(values)}
          >
            <Form>


  

  

  

  

  

  

  

  

  

  
  
    <FormField label='User' labelFor='user'>
        <Field
            name='user'
            id='user'
            component={SelectField}
            options={initialValues.user}
            itemRef={'users'}
      
        
            showField={'firstName'}
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        ></Field>
    </FormField>
    

  

  

    

  



  
    <FormField
        label="Headline"
    >
        <Field
            name="headline"
            placeholder="Headline"
        />
    </FormField>
  

  

  

  

  

  

  

  

  

  

  

    

  



  

  

  

  

  

  

  

  
    <FormField label="TeachingType" labelFor="teaching_type">
        <Field name="teaching_type" id="teaching_type" component="select">
          
            <option value="university_student">university_student</option>
          
            <option value="certified_professional">certified_professional</option>
          
            <option value="experienced_teacher">experienced_teacher</option>
          
        </Field>
    </FormField>
  

  

  

  

    

  



  
    <FormField
        label="InstitutionName"
    >
        <Field
            name="institution_name"
            placeholder="InstitutionName"
        />
    </FormField>
  

  

  

  

  

  

  

  

  

  

  

    

  



  
    <FormField
        label="DegreeOrQualification"
    >
        <Field
            name="degree_qualification"
            placeholder="DegreeOrQualification"
        />
    </FormField>
  

  

  

  

  

  

  

  

  

  

  

    

  



  

  

  

  
    <FormField
        label="GraduationYear"
    >
        <Field
            type="number"
            name="graduation_year"
            placeholder="GraduationYear"
        />
    </FormField>
  

  

  

  

  

  

  

  

    

  



  

  

  

  

  

  

  

  

  

  

  
      <FormField label='SubjectCategories' labelFor='subject_categories'>
          <Field
              name='subject_categories'
              id='subject_categories'
              component={SelectFieldMany}
              options={initialValues.subject_categories}
              itemRef={'subject_categories'}
            
            
            
            
            
            
            
            
            
            
            
            
              showField={'name_en'}
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
          ></Field>
      </FormField>
  

    

  



  

  

  

  

  

  

  

  

  

  

  
      <FormField label='Subjects' labelFor='subjects'>
          <Field
              name='subjects'
              id='subjects'
              component={SelectFieldMany}
              options={initialValues.subjects}
              itemRef={'subjects'}
            
            
            
            
            
            
            
            
            
            
            
            
            
            
              showField={'name'}
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
          ></Field>
      </FormField>
  

    

  



  

  

  

  

  

  

  

  

  

  

  
      <FormField label='SpokenLanguages' labelFor='languages'>
          <Field
              name='languages'
              id='languages'
              component={SelectFieldMany}
              options={initialValues.languages}
              itemRef={'languages'}
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
              showField={'name'}
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
          ></Field>
      </FormField>
  

    

  



  

  

  

  

  

  

  

  
    <FormField label="SessionLanguage" labelFor="session_language">
        <Field name="session_language" id="session_language" component="select">
          
            <option value="bangla">bangla</option>
          
            <option value="english">english</option>
          
            <option value="both">both</option>
          
        </Field>
    </FormField>
  

  

  

  

    

  



  

  

  

  

  

  

  

  
    <FormField label="TeachingFormat" labelFor="teaching_format">
        <Field name="teaching_format" id="teaching_format" component="select">
          
            <option value="live_video">live_video</option>
          
            <option value="async_review">async_review</option>
          
            <option value="mixed">mixed</option>
          
        </Field>
    </FormField>
  

  

  

  

    

  



  

  

  

  

  

  

  

  
    <FormField label="VerificationStatus" labelFor="verification_status">
        <Field name="verification_status" id="verification_status" component="select">
          
            <option value="verified">verified</option>
          
            <option value="pending">pending</option>
          
            <option value="rejected">rejected</option>
          
        </Field>
    </FormField>
  

  

  

  

    

  



  

  

  

  

  

  

  

  

  

  

  

    

  
        <FormField>
          <Field
            label='VerificationDocuments'
            color='info'
            icon={mdiUpload}
            path={'tutor_profiles/verification_docs'}
            name='verification_docs'
            id='verification_docs'
            schema={{
                size: undefined,
                formats: undefined,
            }}
            component={FormFilePicker}
          ></Field>
        </FormField>
  



  

  
    <FormField label="VerificationNote" hasTextareaHeight>
        <Field name="verification_note" as="textarea" placeholder="VerificationNote" />
    </FormField>
  

  

  

  

  

  

  

  

  

  

    

  



  

  

  

  
    <FormField
        label="Rating"
    >
        <Field
            type="number"
            name="rating"
            placeholder="Rating"
        />
    </FormField>
  

  

  

  

  

  

  

  

    

  



  

  

  

  
    <FormField
        label="TotalSessions"
    >
        <Field
            type="number"
            name="total_sessions"
            placeholder="TotalSessions"
        />
    </FormField>
  

  

  

  

  

  

  

  

    

  



  

  

  

  
    <FormField
        label="TotalReviews"
    >
        <Field
            type="number"
            name="total_reviews"
            placeholder="TotalReviews"
        />
    </FormField>
  

  

  

  

  

  

  

  

    

  



  

  

  

  
    <FormField
        label="ResponseRatePercent"
    >
        <Field
            type="number"
            name="response_rate"
            placeholder="ResponseRatePercent"
        />
    </FormField>
  

  

  

  

  

  

  

  

    

  



  

  

  

  
    <FormField
        label="ResponseTimeHours"
    >
        <Field
            type="number"
            name="response_time_hours"
            placeholder="ResponseTimeHours"
        />
    </FormField>
  

  

  

  

  

  

  

  

    

  



  

  

  

  

  

  

  

  
    <FormField label="BadgeLevel" labelFor="badge_level">
        <Field name="badge_level" id="badge_level" component="select">
          
            <option value="rising_talent">rising_talent</option>
          
            <option value="top_rated">top_rated</option>
          
            <option value="expert">expert</option>
          
            <option value="none">none</option>
          
        </Field>
    </FormField>
  

  

  

  

    

  



  

  

  

  

  

  

  

  

  
    <FormField label='VacationMode' labelFor='vacation_mode'>
        <Field
            name='vacation_mode'
            id='vacation_mode'
            component={SwitchField}
        ></Field>
    </FormField>
  

  

  

    

  



  

  

  

  
    <FormField
        label="MaxConcurrentBookings"
    >
        <Field
            type="number"
            name="max_concurrent_bookings"
            placeholder="MaxConcurrentBookings"
        />
    </FormField>
  

  

  

  

  

  

  

  

    

  



  
    <FormField
        label="JitsiMeetingID"
    >
        <Field
            name="jitsi_meet_meeting_id"
            placeholder="JitsiMeetingID"
        />
    </FormField>
  

  

  

  

  

  

  

  

  

  

  

    

  



  
    <FormField
        label="JitsiMeetingPassword"
    >
        <Field
            name="jitsi_meet_password"
            placeholder="JitsiMeetingPassword"
        />
    </FormField>
  

  

  

  

  

  

  

  

  

  

  

    

  



  

  
    <FormField label="AvailabilityScheduleJSON" hasTextareaHeight>
        <Field name="availability_json" as="textarea" placeholder="AvailabilityScheduleJSON" />
    </FormField>
  

  

  

  

  

  

  

  

  

  

    

  


  

              <BaseDivider />
              <BaseButtons>
                <BaseButton type="submit" color="info" label="Submit" />
                <BaseButton type="reset" color="info" outline label="Reset" />
                <BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/tutor_profiles/tutor_profiles-list')}/>
              </BaseButtons>
            </Form>
          </Formik>
        </CardBox>
      </SectionMain>
    </>
  )
}

EditTutor_profiles.getLayout = function getLayout(page: ReactElement) {
  return (
      <LayoutAuthenticated
        
          permission={'UPDATE_TUTOR_PROFILES'}
        
      >
          {page}
      </LayoutAuthenticated>
  )
}

export default EditTutor_profiles
