import type { PopulatedOrder } from "@/services/models/Order";

import CloseSVG from "@/assets/icons/close.svg";
import EnvelopeClosedSVG from "@/assets/icons/envelope-closed.svg";
import LocationPinSVG from "@/assets/icons/location-pin.svg";
import PhoneSVG from "@/assets/icons/phone.svg";
import UserSVG from "@/assets/icons/user.svg";

import CartSummaryItem from "../CartSummaryItem/CartSummaryItem";

import clsx from "clsx";
import Button from "../Button/Button";
import styles from "./OrderDetails.module.scss";

export default function OrderDetails({
  order,
  onClose,
  type,
}: {
  order: PopulatedOrder;
  onClose: () => void;
  type?: "admin";
}) {
  function formatToCurrency(num: number) {
    return new Intl.NumberFormat("ru-RU", {
      style: "currency",
      currency: "RUB",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(num);
  }

  function formatPhoneNumber(value: string) {
    let digits = value.replace(/\D/g, "");

    if (digits.startsWith("8") || digits.startsWith("7")) {
      digits = digits.slice(1);
    }

    digits = digits.slice(0, 10);
    const { length } = digits;

    if (length < 4) return `+7 (${digits}`;
    if (length < 7) return `+7 (${digits.slice(0, 3)}) ${digits.slice(3)}`;
    if (length < 9)
      return `+7 (${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
    return `+7 (${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 8)}-${digits.slice(8)}`;
  }

  return (
    <div
      className={clsx(
        styles["order-details"],
        type && styles[`order-details--type-${type}`],
      )}
    >
      <div className={styles["order-details__wrapper"]}>
        <Button
          icon={CloseSVG}
          variant="primary"
          onClick={onClose}
          className={styles["order-details__button"]}
        />

        <div className={styles["order-details__content"]}>
          <span className={styles["order-details__heading"]}>
            Детали Заказа {`#${order.orderNo.slice(4)}`}
          </span>

          <div className={styles["order-details__body"]}>
            {type === "admin" ? (
              <>
                <div className={styles["order-details__left-container"]}>
                  <div
                    className={styles["order-details__user-details-container"]}
                  >
                    <div className={styles["order-details__user-detail"]}>
                      <UserSVG
                        className={styles["order-details__user-detail-icon"]}
                      />

                      <span>{order.userId.name}</span>
                    </div>

                    <div className={styles["order-details__user-detail"]}>
                      <EnvelopeClosedSVG
                        className={styles["order-details__user-detail-icon"]}
                      />

                      <span>{order.userId.email}</span>
                    </div>

                    <div className={styles["order-details__user-detail"]}>
                      <PhoneSVG
                        className={styles["order-details__user-detail-icon"]}
                      />

                      <span>{formatPhoneNumber(order.userId.phoneNumber)}</span>
                    </div>

                    <div className={styles["order-details__user-detail"]}>
                      <LocationPinSVG
                        className={styles["order-details__user-detail-icon"]}
                      />

                      <span>{`${order.address.line1}, ${order.address.city}, ${order.address.zip.toString()}`}</span>
                    </div>
                  </div>

                  <div className={styles["order-details__details-container"]}>
                    <div className={styles["order-details__detail"]}>
                      <span className={styles["order-details__detail-heading"]}>
                        Сумма Заказа
                      </span>

                      <span className={styles["order-details__detail-value"]}>
                        {formatToCurrency(order.totals.sub)}
                      </span>
                    </div>

                    <div className={styles["order-details__detail"]}>
                      <span className={styles["order-details__detail-heading"]}>
                        Скидка
                      </span>

                      <span className={styles["order-details__detail-value"]}>
                        {formatToCurrency(order.totals.discount)}
                      </span>
                    </div>

                    <div className={styles["order-details__detail"]}>
                      <span className={styles["order-details__detail-heading"]}>
                        Доставка
                      </span>

                      <span className={styles["order-details__detail-value"]}>
                        {order.totals.ship
                          ? formatToCurrency(order.totals.ship)
                          : "Бесплатно"}
                      </span>
                    </div>
                  </div>

                  <div className={styles["order-details__total-container"]}>
                    <span className={styles["order-details__total-heading"]}>
                      Итого к Оплате
                    </span>

                    <span className={styles["order-details__total-value"]}>
                      {formatToCurrency(order.totals.grand)}
                    </span>
                  </div>
                </div>

                <div
                  className={styles["order-details__order-details-container"]}
                >
                  {order.items.map((item) => (
                    <CartSummaryItem key={item.name} item={item} type="modal" />
                  ))}
                </div>
              </>
            ) : (
              <>
                <div
                  className={styles["order-details__order-details-container"]}
                >
                  {order.items.map((item) => (
                    <CartSummaryItem key={item.name} item={item} type="modal" />
                  ))}
                </div>

                <div className={styles["order-details__details-container"]}>
                  <div className={styles["order-details__detail"]}>
                    <span className={styles["order-details__detail-heading"]}>
                      Сумма Заказа
                    </span>

                    <span className={styles["order-details__detail-value"]}>
                      {formatToCurrency(order.totals.sub)}
                    </span>
                  </div>

                  <div className={styles["order-details__detail"]}>
                    <span className={styles["order-details__detail-heading"]}>
                      Скидка
                    </span>

                    <span className={styles["order-details__detail-value"]}>
                      {formatToCurrency(order.totals.discount)}
                    </span>
                  </div>

                  <div className={styles["order-details__detail"]}>
                    <span className={styles["order-details__detail-heading"]}>
                      Доставка
                    </span>

                    <span className={styles["order-details__detail-value"]}>
                      {order.totals.ship
                        ? formatToCurrency(order.totals.ship)
                        : "Бесплатно"}
                    </span>
                  </div>
                </div>

                <div className={styles["order-details__total-container"]}>
                  <span className={styles["order-details__total-heading"]}>
                    Итого к Оплате
                  </span>

                  <span className={styles["order-details__total-value"]}>
                    {formatToCurrency(order.totals.grand)}
                  </span>
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}