import {Button, Modal, Row, Typography, Spin, Splitter, Divider} from "antd";
import useAppointmentView from "./useAppointmentView.js";

const AppointmentViewModal = () => {
    const {
        modalWidth,
        blockStyle,
        footerRowStyle,
        footerButtonStyle,
        labels,
        selectedAppointment,
        visible,
        getDateString,
        getAppointmentTime,
        getPatientName,
        getPatientField,
        getResults,
        onCancel,
        files,
        isFilesLoading,
        downloadingFiles,
        downloadFile,
    } = useAppointmentView();

    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)}}
                />
                <p>
                    <b>{labels.files}</b>
                </p>
                {isFilesLoading ? (
                    <Spin/>
                ) : files.length > 0 ? (
                    files.map((file) => (
                        <Row key={file.id} align="middle" justify="space-between">
                            <span>{file.file_title || labels.notSpecified}</span>
                            <Button
                                onClick={() => downloadFile(file.id, file.file_title)}
                                loading={downloadingFiles[file.id] || false}
                                disabled={downloadingFiles[file.id] || false}
                                type={"dashed"}
                            >
                                {downloadingFiles[file.id] ? labels.downloading : labels.download}
                            </Button>
                            <Divider/>
                        </Row>
                    ))
                ) : (
                    <p>{labels.noFiles}</p>
                )}
            </div>
            <Row justify="end" style={footerRowStyle}>
                <Button style={footerButtonStyle} onClick={onCancel}>
                    {labels.closeButton}
                </Button>
            </Row>
        </Modal>
    );
};

export default AppointmentViewModal;