import React from 'react'
import { ATextField, ATextArea , ADatePickerV2 } from '../../../../../form-fields/form-field.component'
import { MettaSvr_Common } from '../../../../../../redux/helpers/action-enums'
const QualificationCard = ({showQualification=true, showCertification=true, showWorkExperience=true}) => {


    return (
        <fieldset className="mt-4">
            <h3 className="fieldset-title">Qualification &amp; Work Experience</h3>
            <div className="inputgroup mt-3 mb-2">
                {
                    showQualification ? 
                    <>
                        <span className="groupname"><b>Qualification</b></span>
                        <div className="form-row">
                            <div className="form-group col-md-6">
                                <ATextField label="Highest Qualification" name="Qualification[0].Details" type="text" />
                            </div>
                            <div className="form-group col-md-6">
                                <ADatePickerV2 label="Year Of Completion" name="Qualification[0].CompletionYear" 
                                showYearPicker={true}
                                dateFormat={MettaSvr_Common.YearOnlyDateFormat}
                                placeholder={MettaSvr_Common.YearOnlyDateFormat} 
                                yearItemNumber={9}
                                
                                />
                            </div>
                        </div>
                    </> : null
                }
                {
                    showCertification ? 
                    <>
                        <span className="groupname"><b>Special Qualification</b></span>
                        <div className="form-row">
                            <div className="form-group col-md-6">
                                <ATextField label="Any special Certifications" name="Certification[0].Details" type="text" />
                            </div>

                            <div className="form-group col-md-6">
                                <ADatePickerV2 label="Year Of Completion" name="Certification[0].CompletionYear" 
                                    showYearPicker={true}
                                    dateFormat={MettaSvr_Common.YearOnlyDateFormat}
                                    placeholder={MettaSvr_Common.YearOnlyDateFormat} 
                                    yearItemNumber={9}                                    
                                    
                                />
                            </div>

                        </div>
                    </>: null
                }
                
            </div>

            <div className="inputgroup mt-3 mb-2">
                {
                    showWorkExperience ? 
                    <>
                        <span className="groupname"><b>Work Experience</b></span>
                        <div className="form-row">
                            <div className="form-group col-md-6">
                                <ADatePickerV2 label="Started Working From" name="WorkExperience[0].FromDate" showYearPicker={true}
                                dateFormat={MettaSvr_Common.YearOnlyDateFormat}
                                placeholder={MettaSvr_Common.YearOnlyDateFormat} 
                                yearItemNumber={9}
                                    />
                            </div>  
                            <div className="form-group col-md-6">
                                <ADatePickerV2 label="Worked Till" name="WorkExperience[0].TillDate" showYearPicker={true}
                                dateFormat={MettaSvr_Common.YearOnlyDateFormat}
                                placeholder={MettaSvr_Common.YearOnlyDateFormat} 
                                yearItemNumber={9}
                                    />
                            </div>
                            <div className="form-group col-md-12">
                                <ATextField label="Workplace Name" name="WorkExperience[0].Details" type="text" placeholder="Institute/Hospital/Clinic"/>                        
                            </div>
                            {/* <div className="form-group col-md-6">
                                <ATextField label="Designation" name="designation" type="text" placeholder="Designation"/>                        
                            </div> */}
                        </div>
                    </>
                    : null
                }          
                {
                    showWorkExperience && showQualification && showCertification ?
                    <div className="form-row">
                        <div className="form-group col-md-12">
                            <ATextArea label="Register reason" name="RegisterReason" rows="2" />
                        </div>

                    </div>
                    : null
                }      
                
            </div>
        </fieldset>

    )
}

export default QualificationCard