import React from 'react';
import {connect} from "react-redux";

import {
    setAppointmentSpec,
    setAppointmentShedule,
    setAppointmentDoctor,
    clearAppointment,
    setAppointmentTime,
    setAppointmentComment,
    postOrders

} from "../actions/actions";

import Calendar from "../components/Calendar"

export class Appoint extends React.Component {

    componentDidMount() {
        this.props.setAppointmentDoctor(this.props.match.params.doctorId)
    }

    componentWillUnmount() {
        this.props.clearAppointment()
    }

    render() {
        const {doctors, appointment, timeArray,services} = this.props.app;
        const {match, setAppointmentSpec, setAppointmentShedule, setAppointmentTime, setAppointmentComment, postOrders} = this.props;
        const doctor = doctors.find(el => el._id === match.params.doctorId);
        let spec;
        if (appointment.spec){
            spec = services.find(el => el._id === appointment.spec)
        }
        return (
            <>
                <div className="main">
                    {doctor &&
                    <div className = "info-wrap">
                        <div className="card">
                            <div className="card-item">
                                <img src={`.${doctor.photo}`} alt={doctor.name}/>
                            </div>
                            <div className="card-item desc">
                                <h3>{doctor.name}</h3>
                                <p className = "highlights">{doctor.profession}</p>

                                {appointment.spec &&
                                <div>
                                    <p>{spec.name}</p>
                                    <p>Длительность: {spec.duration} ч.</p>
                                    {/* <p>{spec.description}</p> */}
                                    <p>Цена от {spec.price} грн.</p>
                                </div>
                                }

                                <select  onChange={(e)=>setAppointmentSpec(e.target.value)} defaultValue='Выбор услуги'>
                                    <option disabled >Выбор услуги</option>
                                    {
                                        doctor.speciality.map(el=> (
                                            <option key={el._id}>{el.name}</option>
                                        ))
                                    }
                                </select>

                                {appointment.spec &&
                                <Calendar doctor={doctor} setAppointmentShedule={setAppointmentShedule} />
                                }

                                {appointment.shedule &&
                                <div>
                                    <div>
                                        <select onChange={(e)=>setAppointmentTime(e.target.value)} defaultValue='choose time'>
                                            <option disabled >Выбор даты</option>
                                            {
                                                timeArray.map(el=> (
                                                    <option key={Object.keys(el)[0]}> {Object.keys(el)[0]} </option>
                                                ))
                                            }
                                        </select>
                                    </div>
                                </div>
                                }

                                {appointment.time &&
                                <div style={{display:"flex",flexDirection:"column"}}>
                                    <input type='text' placeholder='Добавить комментарий' onChange={(e)=>setAppointmentComment(e.target.value)}/>
                                    <button onClick={() => postOrders(appointment)}>Подтвердите запись</button>
                                </div>
                                }

                            </div>
                        </div>
                    </div>
                    }
                </div>

            </>
        );
    }
}

const mapStateToProps = state => {
    return {
        app:state.app,
    }
};

const mapDispatchToProps = {
    setAppointmentSpec,
    setAppointmentShedule,
    setAppointmentDoctor,
    clearAppointment,
    setAppointmentTime,
    setAppointmentComment,
    postOrders
};

export default connect (mapStateToProps,mapDispatchToProps)(Appoint)