import {Card, Popconfirm, Tooltip} from "antd";
import PropTypes from "prop-types";
import {DeleteOutlined, EditOutlined, EyeOutlined} from "@ant-design/icons";
import {useState} from "react";
import PatientViewModal from "../Pages/PatientsPage/Components/PatientViewModal/PatientViewModal.jsx";
import {PatientPropType} from "../../Types/patientPropType.js";

const PatientListCard = ({patient, handleEditPatient, handleDeletePatient}) => {
    const [showModalInfo, setShowModalInfo] = useState(false);

    const birthday = new Date(patient.birthday)

    const deletePatient = () => {
        handleDeletePatient(patient.id);
    };

    const handleViewPatient = () => {
        setShowModalInfo(true);
    };

    const actions = [
        <Tooltip title="Просмотр пациента" key={"viewPatient"}>
            <EyeOutlined
                onClick={handleViewPatient}
            />
        </Tooltip>,

        <Tooltip title="Редактирование пациента" key={"editPatient"}>
            <EditOutlined
                onClick={() => {
                    handleEditPatient(patient);
                }}
            />
        </Tooltip>,
        <Tooltip title="Удаление пациента" key={"deletePatient"}>
            <Popconfirm
                title="Удаление пациента"
                description="Вы уверены, что хотите удалить пациента?"
                onConfirm={deletePatient}
                okText="Да, удалить"
                cancelText="Отмена"
            >
                <DeleteOutlined
                    style={{color: "red"}}
                />
            </Popconfirm>
        </Tooltip>,
    ];

    return (
        <>
            <Card
                type="inner"
                title={`${patient.last_name} ${patient.first_name}`}
                actions={actions}
            >
                <p><strong>📅 Дата рождения:</strong> {birthday.toLocaleString('ru-RU', {
                    month: 'long',
                    day: 'numeric',
                    year: 'numeric'
                })}</p>
                {patient.phone && <p><strong>📞 Телефон:</strong> {patient.phone}</p>}
                {patient.email && <p><strong>✉️ Email:</strong> {patient.email}</p>}
            </Card>

            <PatientViewModal
                visible={showModalInfo}
                onCancel={() => setShowModalInfo(false)}
                patient={patient}
            />
        </>
    );
};

PatientListCard.propTypes = {
    patient: PatientPropType.isRequired,
    handleEditPatient: PropTypes.func.isRequired,
    handleDeletePatient: PropTypes.func.isRequired,
};

export default PatientListCard;