import React from 'react'
import { ATextField, ASelect, ADatePickerV2, RadioButtons } from '../../../../form-fields/form-field.component'
import {MettaSvr_Common} from '../../../../../redux/helpers/action-enums'
const PersonalCard = ({isEmailReadOnly = false, isSalutationReadOnly = false, isGenderReadOnly = false}) => {
    const genderOptions = [
        {   key: 'Male', value: MettaSvr_Common.GenderEnum.Male},
        {   key: 'Female', value: MettaSvr_Common.GenderEnum.Female },
        {   key: 'Others', value: MettaSvr_Common.GenderEnum.Others }
    ]
    const salutationOptions = [
        {   key: 'Select.', value: '' },
        {   key: 'Mr.', value: MettaSvr_Common.SalutationEnum.MR },
        {   key: 'Ms.', value: MettaSvr_Common.SalutationEnum.MS },
        {   key: 'Dr.', value: MettaSvr_Common.SalutationEnum.DR }
    ]

    return (

        <fieldset className="mt-4">
            <h2 className="fieldset-title">Personal Information</h2>

            <div className="form-row">
                <div className="form-group col-md-3">
                    <ASelect name="Salutation" label="Signature" options={salutationOptions} readOnly={isSalutationReadOnly}/>                    
                </div>
                <div className="form-group col-md-9">
                    <ATextField label="First Name" name="FirstName" type="text" />
                </div>
            </div>
            
            <div className="form-row">

                <div className="form-group col-md-6">
                    <ATextField label="Middle Name" name="MiddleName" type="text" />
                </div>
                <div className="form-group col-md-6">
                    <ATextField label="Last Name" name="LastName" type="text" />
                </div>
            </div>
            
            <div className="form-row">
                <div className="form-group col-md-6">
                    <ATextField label="Phone Number" name="PhoneNo" type="text" />
                </div>
                <div className="form-group col-md-6">
                    <ATextField label="Email" name="Email" type="text" readOnly={isEmailReadOnly}/>
                </div>
            </div>

            <div className="form-row">
            <div className="form-group col-md-6">
                    <RadioButtons 
                        label="Gender"
                        name="Gender"
                        inline
                        options={genderOptions}
                        disabled={isGenderReadOnly}
                    />                 
                </div>   

                <div className="form-group col-md-6">
                    <ADatePickerV2 label="DOB" name="DOB" placeholder={MettaSvr_Common.DateFormat} 
                    dateFormat={MettaSvr_Common.DateFormat} 
                    saveDateFormat={MettaSvr_Common.SaveDateFormat} 
                    showPreviousMonths
                    showYearDropdown
                    />
                </div>
            </div>

        </fieldset>


    )
}

export default PersonalCard