import {Button, Modal, Row, Typography, Spin, Divider, Popconfirm} 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,
        deletingFiles,
        deleteFile,
        printResults,
    } = 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>
                            <div>
                                <Button
                                    onClick={() => downloadFile(file.id, file.file_title)}
                                    loading={downloadingFiles[file.id] || false}
                                    disabled={downloadingFiles[file.id] || deletingFiles[file.id] || false}
                                    type={"dashed"}
                                    style={{marginRight: 8}}
                                >
                                    {downloadingFiles[file.id] ? labels.downloading : labels.download}
                                </Button>
                                <Popconfirm
                                    title={labels.confirmDelete}
                                    onConfirm={() => deleteFile(file.id, file.file_title)}
                                >
                                    <Button
                                        loading={deletingFiles[file.id] || false}
                                        disabled={deletingFiles[file.id] || downloadingFiles[file.id] || false}
                                        type={"dashed"}
                                        danger
                                    >
                                        {deletingFiles[file.id] ? labels.deleting : labels.delete}
                                    </Button>
                                </Popconfirm>
                            </div>
                            <Divider/>
                        </Row>
                    ))
                ) : (
                    <p>{labels.noFiles}</p>
                )}
            </div>
            <Row justify="end" style={footerRowStyle}>
                <Button
                    style={footerButtonStyle}
                    onClick={printResults}
                    disabled={!selectedAppointment.results || selectedAppointment.results === labels.resultsNotSpecified}
                >
                    {labels.printResults}
                </Button>
                <Button style={footerButtonStyle} onClick={onCancel}>
                    {labels.closeButton}
                </Button>
            </Row>
        </Modal>
    );
};

export default AppointmentViewModal;