import React from "react";

import ErrorIcon from "./ErrorIcon/ErrorIcon";

import styles from "./Toast.module.scss";

export type ToastVariant = "error" | "success" | "warning" | "info";

interface IToastProps {
  variant: ToastVariant;
  children: React.ReactNode;
  classNameContainer?: string;
  classNameToast?: string;
  onClose?: () => void;
}

const getIcon = (variant: ToastVariant) => {
  switch (variant) {
    case "error":
      return <ErrorIcon />;
    case "success":
      return (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <circle
            cx="12"
            cy="12"
            r="11"
            strokeWidth={1.5}
            stroke="currentColor"
          />
          <path
            d="M8 12L11 15L16 9"
            stroke="currentColor"
            strokeWidth={1.5}
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      );
    case "warning":
      return (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path
            d="M12 2L2 20H22L12 2Z"
            stroke="currentColor"
            strokeWidth={1.5}
            fill="none"
          />
          <path
            d="M12 9V13"
            stroke="currentColor"
            strokeWidth={1.5}
            strokeLinecap="round"
          />
          <circle cx="12" cy="17" r="1" fill="currentColor" />
        </svg>
      );
    case "info":
      return (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <circle
            cx="12"
            cy="12"
            r="11"
            strokeWidth={1.5}
            stroke="currentColor"
          />
          <path
            d="M12 8V12"
            stroke="currentColor"
            strokeWidth={1.5}
            strokeLinecap="round"
          />
          <path
            d="M12 16H12.01"
            stroke="currentColor"
            strokeWidth={1.5}
            strokeLinecap="round"
          />
        </svg>
      );
  }
};

function Toast({
  variant,
  children,
  classNameContainer = "",
  classNameToast = "",
  onClose,
}: IToastProps) {
  return (
    <div className={`${styles.container} ${classNameContainer}`}>
      <div className={`${styles.toast} ${styles[variant]} ${classNameToast}`}>
        {getIcon(variant)}
        <div className={styles.content}>{children}</div>
        {onClose && (
          <button
            onClick={onClose}
            className={styles.closeButton}
            aria-label="Закрыть уведомление"
            type="button"
          >
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path
                d="M12 4L4 12M4 4L12 12"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </button>
        )}
      </div>
    </div>
  );
}

export default Toast;