import useScheduledAppointmentFormModal from "./useScheduledAppointmentFormModal.js";
import useScheduledAppointmentFormModalUI from "./useScheduledAppointmentFormModalUI.js";
import {Button, Collapse, DatePicker, Input, Modal, Select, Space, Typography} from "antd";
import dayjs from "dayjs";


const ScheduledAppointmentFormModal = () => {
    const scheduledAppointmentFormModalData = useScheduledAppointmentFormModal();
    const scheduledAppointmentFormModalUI = useScheduledAppointmentFormModalUI(scheduledAppointmentFormModalData.patients, scheduledAppointmentFormModalData.createScheduledAppointment);

    const patientsItems = scheduledAppointmentFormModalUI.filteredPatients.map((patient) => ({
        key: patient.id,
        label: `${patient.last_name} ${patient.first_name} (${scheduledAppointmentFormModalUI.getDateString(patient.birthday)})`,
        children: (
            <div>
                <p><b>Пациент:</b> {patient.last_name} {patient.first_name}</p>
                <p><b>Дата рождения:</b> {scheduledAppointmentFormModalUI.getDateString(patient.birthday)}</p>
                <p><b>Диагноз:</b> {patient.diagnosis || 'Не указан'}</p>
                <p><b>Email:</b> {patient.email || 'Не указан'}</p>
                <p><b>Телефон:</b> {patient.phone || 'Не указан'}</p>
                <Button type="primary" onClick={() => scheduledAppointmentFormModalUI.setSelectedPatient(patient)}>
                    Выбрать
                </Button>
            </div>
        ),
    }));

    return (
        <>
            <Modal
                title="Планирование приема"
                open={scheduledAppointmentFormModalUI.scheduledModalVisible}
                onCancel={scheduledAppointmentFormModalUI.handleCancelModal}
                footer={null}
                width={scheduledAppointmentFormModalUI.modalWidth}
            >
                <Space direction="vertical">
                    <Typography.Text>Тип приема</Typography.Text>
                    <Select
                        placeholder="Тип приема"
                        value={scheduledAppointmentFormModalUI.selectedAppointmentType}
                        onChange={scheduledAppointmentFormModalUI.handleSetSelectedAppointmentType}
                    >
                        {scheduledAppointmentFormModalData.appointmentTypes.map((appointmentType) => (
                            <Select.Option key={appointmentType.id} value={appointmentType.id}>
                                {appointmentType.title}
                            </Select.Option>
                        ))}
                    </Select>
                    <Typography.Text>Планируемая дата приема</Typography.Text>
                    <DatePicker
                        showTime
                        format="DD.MM.YYYY HH:mm"
                        placeholder="Дата приема"
                        style={scheduledAppointmentFormModalUI.datePickerStyle}
                        value={scheduledAppointmentFormModalUI.selectedDateTime}
                        onChange={scheduledAppointmentFormModalUI.handleSetDateTime}
                        minDate={dayjs(new Date()).add(1, 'day')}
                    />
                </Space>
                {scheduledAppointmentFormModalUI.selectedPatient ? (
                    <div style={scheduledAppointmentFormModalUI.blockStepStyle}>
                        <Typography.Text strong>
                            {scheduledAppointmentFormModalUI.selectedPatient.last_name} {scheduledAppointmentFormModalUI.selectedPatient.first_name}
                        </Typography.Text>
                        <p><b>Дата
                            рождения:</b> {scheduledAppointmentFormModalUI.getSelectedPatientBirthdayString()}
                        </p>
                        <p><b>Email:</b> {scheduledAppointmentFormModalUI.selectedPatient.email || 'Не указан'}</p>
                        <p><b>Телефон:</b> {scheduledAppointmentFormModalUI.selectedPatient.phone || 'Не указан'}
                        </p>
                        <Button
                            type="primary"
                            onClick={scheduledAppointmentFormModalUI.resetPatient}
                            danger
                        >
                            Выбрать другого пациента
                        </Button>
                    </div>
                ) : (
                    <>
                        <Input
                            placeholder="Поиск пациента"
                            value={scheduledAppointmentFormModalUI.searchPatientString}
                            onChange={scheduledAppointmentFormModalUI.handleSetSearchPatientString}
                            style={scheduledAppointmentFormModalUI.searchInputStyle}
                            allowClear
                        />
                        <div style={scheduledAppointmentFormModalUI.chooseContainerStyle}>
                            <Collapse items={patientsItems}/>
                        </div>
                    </>
                )}
                <Button
                    type="primary"
                    disabled={scheduledAppointmentFormModalUI.selectedPatient === null || scheduledAppointmentFormModalUI.selectedDateTime === null || scheduledAppointmentFormModalUI.selectedAppointmentType === null}
                    onClick={scheduledAppointmentFormModalUI.handleCreateScheduledAppointment}
                    style={scheduledAppointmentFormModalUI.buttonStyle}
                >
                    Запланировать
                </Button>
            </Modal>
        </>
    );
};

export default ScheduledAppointmentFormModal;