import {Button, Modal, Row, Typography} from "antd";
import useAppointmentViewUI from "./useAppointmentViewUI.js";

const AppointmentViewModal = () => {
    const {
        modalWidth,
        blockStyle,
        footerRowStyle,
        footerButtonStyle,
        labels,
        selectedAppointment,
        visible,
        getDateString,
        getAppointmentTime,
        getPatientName,
        getPatientField,
        getResults,
        onCancel,
    } = useAppointmentViewUI();

    if (!selectedAppointment) {
        return null;
    }

    return (
        <Modal
            title={labels.title}
            open={visible}
            onCancel={onCancel}
            footer={null}
            width={modalWidth}
        >
            <div style={blockStyle}>
                <Typography.Title level={4}>Информация о приеме</Typography.Title>
                <p>
                    <b>{labels.patient}</b> {getPatientName(selectedAppointment.patient)}
                </p>
                <p>
                    <b>{labels.birthday}</b>{" "}
                    {getDateString(selectedAppointment.patient?.birthday)}
                </p>
                <p>
                    <b>{labels.email}</b>{" "}
                    {getPatientField(selectedAppointment.patient?.email)}
                </p>
                <p>
                    <b>{labels.phone}</b>{" "}
                    {getPatientField(selectedAppointment.patient?.phone)}
                </p>
                <p>
                    <b>{labels.type}</b>{" "}
                    {getPatientField(selectedAppointment.type?.title)}
                </p>
                <p>
                    <b>{labels.appointmentTime}</b>{" "}
                    {getAppointmentTime(selectedAppointment.appointment_datetime)}
                </p>
                <p>
                    <b>{labels.daysUntilNext}</b>{" "}
                    {getPatientField(selectedAppointment.days_until_the_next_appointment)}
                </p>
                <p>
                    <b>{labels.results}</b>
                </p>
                <div
                    dangerouslySetInnerHTML={{__html: getResults(selectedAppointment.results)}}
                />
            </div>
            <Row justify="end" style={footerRowStyle}>
                <Button style={footerButtonStyle} onClick={onCancel}>
                    {labels.closeButton}
                </Button>
            </Row>
        </Modal>
    );
};

export default AppointmentViewModal;