import * as React from "react";
import Svg, {
  G,
  Path,
  Circle,
  Rect,
  Text,
  Image,
} from "react-native-svg";
import { type QrTemplateProps, getFontFamily, renderSvgLines } from "./common";

// eslint-disable-next-line @typescript-eslint/no-var-requires
const template8Bg = require("../../../assets/templates/8.jpeg");

const QrTemplate8 = ({
  qrBase64,
  fields,
  hideQr,
  ...props
}: QrTemplateProps) => {
  const rName = fields?.restaurantName;
  const sub = fields?.subtitle;
  const table = fields?.tableNo;
  const cta = fields?.ctaText;
  const wifi = fields?.wifiText;
  const social = fields?.socialText;

  const rNameFont = getFontFamily(rName?.fontId, "System, -apple-system, Roboto, sans-serif");
  const subFont = getFontFamily(sub?.fontId, "System, -apple-system, Roboto, sans-serif");
  const ctaFont = getFontFamily(cta?.fontId, "System, -apple-system, Roboto, sans-serif");
  const infoFont = getFontFamily(wifi?.fontId, "System, -apple-system, Roboto, sans-serif");

  return (
    <Svg width={300} height={300} viewBox="0 0 1024 1024" {...props}>
      <Path fill="#0c4443" d="M0 0h1024v1024H0z" />
      <Image
        width={1024}
        height={1024}
        href={template8Bg}
        preserveAspectRatio="none"
      />

      {/* QR Alanı (Merkez) */}
      {!hideQr && (
        <G transform="translate(348 305)">
          <Rect
            width={328}
            height={336}
            fill="#f9f5eb"
            stroke="#d1a752"
            strokeWidth={1.5}
            rx={16}
          />
          <Rect
            width={304}
            height={312}
            x={12}
            y={12}
            fill="#faf8f2"
            stroke="#0c4443"
            strokeDasharray="6 4"
            strokeOpacity={0.3}
            strokeWidth={1.5}
            rx={12}
          />
          {qrBase64 ? (
            <Image
              href={`data:image/png;base64,${qrBase64}`}
              x={18}
              y={18}
              width={292}
              height={300}
            />
          ) : (
            <>
              <Circle cx={164} cy={148} r={28} fill="#0c4443" />
              <G fill="#d1a752">
                <Path d="M164 132.6c4.4 6.6 4.4 15.4 0 24.2-4.4-8.8-4.4-17.6 0-24.2" />
                <Path d="M161.8 150.2c-8.8-4.4-13.2 4.4-6.6 8.8 6.6 0 8.8-6.6 6.6-8.8m4.4 0c8.8-4.4 13.2 4.4 6.6 8.8-6.6 0-8.8-6.6-6.6-8.8" />
              </G>
              <Text
                x={164}
                y={218}
                fill="#0c4443"
                fontFamily="System, -apple-system, Roboto, sans-serif"
                fontSize={14}
                fontWeight={800}
                letterSpacing={2}
                textAnchor="middle"
              >
                {"QR KOD ALANI"}
              </Text>
            </>
          )}
        </G>
      )}

      {/* Üst Çizgiler & OR Ayracı */}
      <Path
        stroke="#d1a752"
        strokeLinecap="round"
        strokeWidth={2}
        d="M210 188h240"
      />
      <Text
        x={512}
        y={194}
        fill="#d1a752"
        fontFamily="System, -apple-system, Roboto, sans-serif"
        fontSize={24}
        fontWeight={900}
        letterSpacing={2}
        textAnchor="middle"
      >
        {"OR"}
      </Text>
      <Path
        stroke="#d1a752"
        strokeLinecap="round"
        strokeWidth={2}
        d="M574 188h240"
      />

      {/* Masa Numarası (En Üst) */}
      {table?.visible !== false &&
        renderSvgLines({
          text: table?.text || "MASA NO: 01",
          x: 512,
          y: 70,
          offsetY: table?.offsetY,
          fill: "#d1a752",
          fontFamily: infoFont,
          fontSize: table?.fontSize ? table.fontSize * 1.8 : 22,
          fontWeight: 800,
          letterSpacing: 2,
        })}

      {/* Restoran Başlığı / Üst Başlık */}
      {rName?.visible !== false &&
        renderSvgLines({
          text: rName?.text || "EXPLORE OUR MENU",
          x: 512,
          y: 136,
          offsetY: rName?.offsetY,
          fill: "#fff",
          fontFamily: rNameFont,
          fontSize: rName?.fontSize ? rName.fontSize * 1.8 : 50,
          fontWeight: 900,
          letterSpacing: 2,
        })}

      {/* Slogan / Alt Başlık */}
      {sub?.visible !== false &&
        renderSvgLines({
          text: sub?.text || "THE DAILY SPECIALS",
          x: 512,
          y: 242,
          offsetY: sub?.offsetY,
          fill: "#d1a752",
          fontFamily: subFont,
          fontSize: sub?.fontSize ? sub.fontSize * 1.8 : 42,
          fontWeight: 900,
          letterSpacing: 2,
        })}

      {/* CTA Metni */}
      {cta?.visible !== false &&
        renderSvgLines({
          text: cta?.text || "SCAN TO VIEW OUR\nFULL MENU & SPECIALS",
          x: 512,
          y: 730,
          offsetY: cta?.offsetY,
          fill: "#fff",
          fontFamily: ctaFont,
          fontSize: cta?.fontSize ? cta.fontSize * 1.8 : 28,
          fontWeight: 900,
          letterSpacing: 1,
          lineHeight: 38,
        })}

      {/* WiFi / Sipariş Bilgisi */}
      {wifi?.visible !== false &&
        renderSvgLines({
          text: wifi?.text || "SCAN TO ORDER & BROWSE",
          x: 512,
          y: 846,
          offsetY: wifi?.offsetY,
          fill: "#d1a752",
          fontFamily: infoFont,
          fontSize: wifi?.fontSize ? wifi.fontSize * 1.8 : 22,
          fontWeight: 900,
          letterSpacing: 1.5,
        })}

      {/* Sosyal Medya */}
      {social?.visible !== false &&
        renderSvgLines({
          text: social?.text || "@menulio.app",
          x: 512,
          y: 916,
          offsetY: social?.offsetY,
          fill: "#e5c378",
          fontFamily: infoFont,
          fontSize: social?.fontSize ? social.fontSize * 1.8 : 20,
          fontWeight: 700,
          letterSpacing: 1,
        })}
    </Svg>
  );
};

export default QrTemplate8;
