import {Button, Modal, Popconfirm, Row, Typography} from "antd";
import useScheduledAppointmentsViewModal from "./useScheduledAppointmentsViewModal.js";
import useScheduledAppointmentsViewModalUI from "./useScheduledAppointmentsViewModalUI.js";

const ScheduledAppointmentsViewModal = () => {
    const scheduledAppointmentsViewModalData = useScheduledAppointmentsViewModal();
    const {
        selectedScheduledAppointment,
        modalWidth,
        blockStyle,
        footerRowStyle,
        footerButtonStyle,
        labels,
        visible,
        getDateString,
        getAppointmentTime,
        getPatientName,
        getPatientField,
        onCancel,
        cancelScheduledAppointment,
        handleConvertToAppointment,
    } = useScheduledAppointmentsViewModalUI(scheduledAppointmentsViewModalData.cancelAppointment);

    if (!selectedScheduledAppointment) {
        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(selectedScheduledAppointment.patient)}
                </p>
                <p>
                    <b>{labels.birthday}</b>{" "}
                    {getDateString(selectedScheduledAppointment.patient?.birthday)}
                </p>
                <p>
                    <b>{labels.email}</b>{" "}
                    {getPatientField(selectedScheduledAppointment.patient?.email)}
                </p>
                <p>
                    <b>{labels.phone}</b>{" "}
                    {getPatientField(selectedScheduledAppointment.patient?.phone)}
                </p>
                <p>
                    <b>{labels.type}</b>{" "}
                    {getPatientField(selectedScheduledAppointment.type?.title)}
                </p>
                <p>
                    <b>{labels.appointmentTime}</b>{" "}
                    {getAppointmentTime(selectedScheduledAppointment.scheduled_datetime)}
                </p>
            </div>
            <Row justify="end" style={footerRowStyle}>
                <Button style={footerButtonStyle} onClick={onCancel}>
                    {labels.closeButton}
                </Button>
                <Button type="primary" onClick={handleConvertToAppointment}>
                    {labels.convertButton}
                </Button>
                <Popconfirm
                    title={labels.popconfirmTitle}
                    onConfirm={cancelScheduledAppointment}
                    okText={labels.popconfirmOk}
                    cancelText={labels.popconfirmCancel}
                >
                    <Button type="primary" danger>
                        {labels.cancelButton}
                    </Button>
                </Popconfirm>
            </Row>
        </Modal>
    );
};

export default ScheduledAppointmentsViewModal;