import { formatDateLarge, formatTimeInterval } from "@core/helpers/format";
import { AppointmentEventByClient } from "@core/Models/Appointments.model";
import style from "./style.module.css";
import { formatPrice } from "@core/app/helpers/Numbers";
import { DiscountType } from "@core/Models/Discounts.model";

export interface AppointmentEventHeaderProps {
    appointment: AppointmentEventByClient;
    showPaymentInfo?: boolean;
}

export default function AppointmentEventHeader({
    appointment,
    showPaymentInfo = false,
}: AppointmentEventHeaderProps) {
    const formatDiscount = (t: DiscountType, v: number) => {
        if (t === DiscountType.PERCENTAGE) {
            return `${v}%`;
        } else if (t === DiscountType.FIXED) {
            return formatPrice(v);
        }
    };

    return (
        <div className={style.appointmentHeader} style={{ backgroundColor: appointment.color }}>
            <div>
                {appointment.discountId && (
                    <div className={style.appointmentDiscount}>
                        {`DESCUENTO (${appointment.discountCode}): ${formatDiscount(
                            appointment.discountType,
                            appointment.discountValue
                        )}`}
                    </div>
                )}
                <h1>{formatDateLarge(appointment.appointmentDate)}</h1>
                <h2>
                    {appointment.serviceName} - {appointment.collaboratorName}
                </h2>
                <div>{formatTimeInterval(appointment.startTime, appointment.endTime)}</div>
                {showPaymentInfo && (
                    <>
                        <div>
                            <div>
                                <b>Total: {formatPrice(appointment.price)}</b>{" "}
                                {appointment.payment && (
                                    <span className={style.appointmentPayed}>PAGADO</span>
                                )}
                                {!appointment.payment && (
                                    <span className={style.appointmentNotPayed}>NO PAGADO</span>
                                )}
                            </div>
                        </div>
                        {appointment.clientCtaCteBalance > 0 && (
                            <div>
                                <div style={{ marginTop: "10px" }}>
                                    <b>Cta Cte: <span className={style.appointmentPayed}>{formatPrice(appointment.clientCtaCteBalance)}</span></b>
                                </div>
                            </div>
                        )}
                    </>
                )}
            </div>
        </div>
    );
}
