import React from 'react'
import { UserProfile_Enum } from "../../../../../redux/helpers/action-enums"

export const QualificationElement = ({items, qualificationDetails, submitAsync}) => (
        
        items.map( (item, index  ) => (
            <React.Fragment key={`eq-${index}`}>
                <li className="left_address_info col-md-6">
                    <h4>Title:</h4>
                    <span>{item.Details}</span>
                </li>
                <li className="left_address_info col-md-6">
                    <PerRowDeleteAction func={() => {     
                            const body = prepareBodyForDeletion(index, qualificationDetails, 
                                UserProfile_Enum.WorkExperienceUpdateEnum.QualificationDetails,
                                UserProfile_Enum.WorkExperienceUpdateKeyEnum.QualificationDetails)
                            submitAsync(body)
                        }}/> 
                </li>
                <li className="left_address_info col-md-6">
                    <h4>Year Of Completion</h4>
                    <span>{item.CompletionYear}</span>
                </li>
                <hr style={{width: "100%"}}/>

            </React.Fragment>
        ))
    
)

export const SpecialCertificationElement = ({items, certificateDetails, submitAsync}) => (
    
        items.map( (item, index  ) => (
            <React.Fragment key={`sc-${index}`}>
                <li className="left_address_info col-md-6">
                    <h4>Title:</h4>
                    <span>{item.Details}</span>
                </li>
                <li className="left_address_info col-md-6">
                    <PerRowDeleteAction func={() => {   
                        const body = prepareBodyForDeletion(index, certificateDetails, 
                            UserProfile_Enum.WorkExperienceUpdateEnum.CertificateDetails, 
                            UserProfile_Enum.WorkExperienceUpdateKeyEnum.CertificateDetails)
                        submitAsync(body)
                    }}/> 
                </li>
                <li className="left_address_info col-md-6">
                    <h4>Year Of Completion</h4>
                    <span>{item.CompletionYear}</span>
                </li>                
                <hr style={{width: "100%"}}/>    
            </React.Fragment>
        ))
    
)

export const WorkExperienceElement = ({items, workExDetails, submitAsync}) => (
        
        items.map( (item, index  ) => (
            
            <React.Fragment key={`we-${index}`}>
                 <li className="left_address_info col-md-6">
                    <h4>Title:</h4>
                    <span>{item.Details}</span>
                </li>  
                <li className="left_address_info col-md-6">
                    <PerRowDeleteAction func={() => {  
                        const body = prepareBodyForDeletion(index, workExDetails,
                            UserProfile_Enum.WorkExperienceUpdateEnum.WorkExpDetails,
                            UserProfile_Enum.WorkExperienceUpdateKeyEnum.WorkExpDetails)
                        submitAsync(body)
                    }}/> 
                </li>
                <li className="left_address_info col-md-6">
                    <h4>Started Working From</h4>
                    <span>{item.FromDate}</span>
                </li>
                <li className="left_address_info col-md-6">
                    <h4>Worked Till</h4>
                    <span>{item.TillDate}</span>
                </li>                    
                <hr style={{width: "100%"}}/>
            </React.Fragment>
            
        ))
    
)

const PerRowDeleteAction = ({func}) =>
      (
        <div className="d-flex justify-content-end">            
            <div className="p-1 rounded">
                <button type="button" className='danger' onClick={()=>func()}>
                   Delete
                </button>
            </div>                 
        </div>
    )

const prepareBodyForDeletion = (index, sourceRecords, recordType, key) => {
    const newSourceRecords = [...sourceRecords]                          
    newSourceRecords.splice(index, 1)
    const obj = {
        [key]: newSourceRecords
    }
    return {
        UpdateType: recordType,
        UpdateInfo: JSON.stringify(obj)
        }
}