import React, {useState} from 'react'
import { Formik, Form } from 'formik'
import { connect } from 'react-redux'
import { ATextArea, ATextField, ASelect,ADatePickerV3 } from "../../../form-fields/form-field.component"
import { DailyLogActionTypes } from "../../../../redux/dashboard/daily-logs/daily-logs.action.types"
import { MettaSvr_Common } from '../../../../redux/helpers/action-enums'
import { saveDailyLogsAsync } from "../../../../redux/dashboard/daily-logs/daily-logs.action"
import ToastComponent from '../../../utility/toast/toast.component'
import WithSpinner from '../../../utility/hoc/spinner/with-spinner.component'
import  { formInitialValues, logTypeOptions} from './add-daily-log.initial-values'
import { isTodayOrYesterdayOrDayBeforeYesterday } from '../../../utility/Utils'
import {validators} from './add-daily-log.validation-rules'
import './add-daily-log.styles.scss'

const AddDailyLogComponent = ({ userId, errorMessage, doDismissError, saveDailyLogs, loading}) => {

    const [photo, setPhoto] = useState("")
    const SubmitButtonWithSpinner = WithSpinner(
        () =>
          (
            <div className="row justify-content-end mt-1">
                <div className="col-3">
                    <button type="submit" name="submit" className="p-2 next btn btn-primary">
                        Submit                                   
                    </button>
                </div>
                
            </div>
          )
        
        )

    const dismissToast = e => {
        doDismissError()
    }

    const fileSelectHandler = evt => {
        setPhoto(evt.target.files[0])
    }



    return (  <>
     <Formik
                initialValues={{
                    ...formInitialValues(userId)
                }}

                validationSchema={validators}
                onSubmit={ values => {
                    // console.log(values)
                    saveDailyLogs(values, photo)                    
                }}
            >
                {formik => (
                    <Form>
                        <fieldset >

                            <div className="form-row">
                                <div className="col-md-12">
                    
                                    <ADatePickerV3 label="Date" name="logDate" placeholder={MettaSvr_Common.DateFormat} 
                                        dateFormat={MettaSvr_Common.DateFormatV1}
                                        saveDateFormat={MettaSvr_Common.DateFormat}
                                        showPreviousMonths
                                        filterDate={isTodayOrYesterdayOrDayBeforeYesterday}
                                        />
                                </div>
                            </div>
                            <div className="form-row">
                                <div className="col-md-12">
                    
                                    <ADatePickerV3 label="Time" name="logTime" placeholder={MettaSvr_Common.TimeFormat}
                                        isTimePicker={true}
                                        showTimeSelect
                                        showTimeSelectOnly
                                        timeIntervals={15}
                                        timeCaption="Time"
                                        dateFormat={MettaSvr_Common.TimeFormat}
                                        saveDateFormat={MettaSvr_Common.TimeFormat}
                                        />
                                </div>
                            </div>
                            <div className="form-row">
                                <div className="col-md-12">
                                    <ASelect name="logType" label="Log type" options={logTypeOptions}/>                    
                                </div>
                            </div>
                            <div className="form-row">
                                <div className="col-md-12">
                                    <ATextField label="Details / Value" name="details" type="text" />
                                </div>
                            </div>
                            <div className="form-row">
                                <div className="col-md-12">
                                    <ATextArea label="Comments" name="comments" rows="2" />
                                </div>
                            </div>
                
                             <div className="form-row">
                                <div className="col-md-12">
                                    <label className="control-label">Photo Upload</label>
                                    <div className="dropzone">
                                        <input name="photo" type="file" onChange={fileSelectHandler}/>                                    
                                    </div>
                                </div>
                            </div> 


                        </fieldset>
                        

                        <SubmitButtonWithSpinner defaultHeight={false} isLoading={loading}/>

                    </Form>
                )}
        </Formik>
        { !!errorMessage ? <ToastComponent message={errorMessage} onclose={dismissToast}/> : null }

    </>)
}

const mapStateToProps = ({ user, dailyLogs}) => ({
    userId: user.currentUser.userId,
    // result: dailyLogs.result,
    loading: dailyLogs.submissionInProgress,
    errorMessage: dailyLogs.errorMessages
})

const mapDispatchToProps = dispatch => ({
    saveDailyLogs: (body, photoRef) => dispatch(saveDailyLogsAsync(body, photoRef)),
    doDismissError: () => dispatch({type: DailyLogActionTypes.POST_USER_DAILY_LOGS_CLEAR_ERROR})
})

export default connect(mapStateToProps, mapDispatchToProps)(AddDailyLogComponent)