import {Button, Card, List, Modal, Typography} from "antd";
import {useDispatch, useSelector} from "react-redux";
import dayjs from "dayjs";
import {
    closeAppointmentsListModal,
    setSelectedAppointment,
    setSelectedScheduledAppointment
} from "../../../../../Redux/Slices/appointmentsSlice.js";

const AppointmentsListModal = () => {
    const dispatch = useDispatch();
    const {appointmentsListModalVisible, selectedDateAppointments} = useSelector(
        (state) => state.appointmentsUI
    );

    const handleCancel = () => {
        dispatch(closeAppointmentsListModal());
    };

    const handleItemClick = (appointment) => {
        if (appointment.appointment_datetime) {
            dispatch(setSelectedAppointment(appointment));
        } else {
            dispatch(setSelectedScheduledAppointment(appointment));
        }
    };

    return (
        <Modal
            title="Приемы на выбранную дату"
            open={appointmentsListModalVisible}
            onCancel={handleCancel}
            footer={null}
            width={600}
        >
            <Typography.Title level={4}>Список приемов</Typography.Title>
            {selectedDateAppointments.length ? (
                <List
                    dataSource={selectedDateAppointments}
                    renderItem={(item) => (
                        <List.Item
                            style={{cursor: "pointer", padding: "8px 0"}}
                        >
                            <Card
                                hoverable
                                style={{width: "100%"}}
                                size="small"
                                actions={[
                                    <Button type={"link"} key={"view"} onClick={() => handleItemClick(item)}>
                                        Просмотр приема
                                    </Button>
                                ]}
                            >
                                <p>
                                    <b>Время:</b>{" "}
                                    {item.appointment_datetime
                                        ? dayjs(item.appointment_datetime).format("DD.MM.YYYY HH:mm")
                                        : item.scheduled_datetime
                                            ? dayjs(item.scheduled_datetime).format("DD.MM.YYYY HH:mm")
                                            : "Не указано"}
                                </p>
                                <p>
                                    <b>Тип:</b>{" "}
                                    {item.appointment_datetime ? "Прием" : "Запланированный прием"}
                                </p>
                                <p>
                                    <b>Пациент:</b>{" "}
                                    {item.patient
                                        ? `${item.patient.last_name} ${item.patient.first_name}`
                                        : "Не указан"}
                                </p>
                            </Card>
                        </List.Item>
                    )}
                />
            ) : (
                <p>Нет приемов на эту дату</p>
            )}
            <Button onClick={handleCancel} style={{marginTop: 16}}>
                Закрыть
            </Button>
        </Modal>
    );
};

export default AppointmentsListModal;