// A custom Framer code component by Chris Kellett - Framerverse
// v1.1.0

import React from "react"
import { motion, addPropertyControls, ControlType } from "framer"
import { QRCodeSVG } from "qrcode.react"

// Define props type for TypeScript
export default function QRCodeGenerator(props) {
    // Destructure props with defaults
    const {
        sourceType = "url",
        source = "https://framer.com",
        customText = "",
        customEmail = "hello@example.com",
        customPhone = "+1234567890",
        size = 160,
        fgColor = "#000000",
        bgColor = "#ffffff",
        qrColor = "#000000",
        qrBackgroundColor = "#ffffff",
        margin = 4,
        cornerRadius = 0,
        level = "M",
        includeMargin = true,
        style = {},
    } = props

    // Determine QR code value based on source type
    const getQRValue = () => {
        switch (sourceType) {
            case "url":
                return source
            case "text":
                return customText
            case "email":
                return `mailto:${customEmail}`
            case "phone":
                return `tel:${customPhone}`
            case "sms":
                return `sms:${customPhone}`
            case "wifi":
                const { wifiName, wifiPassword, wifiType } = props
                return `WIFI:S:${wifiName};T:${wifiType};P:${wifiPassword};;`
            case "vcard":
                const { vName, vEmail, vPhone, vCompany, vTitle, vWebsite } =
                    props
                return `BEGIN:VCARD
VERSION:3.0
N:${vName}
TEL:${vPhone}
EMAIL:${vEmail}
ORG:${vCompany}
TITLE:${vTitle}
URL:${vWebsite}
END:VCARD`
            default:
                return source
        }
    }

    // Calculate container dimensions
    const containerSize = size + margin * 2

    return (
        <motion.div
            style={{
                width: "100%",
                height: "100%",
                backgroundColor: bgColor,
                borderRadius: cornerRadius,
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                overflow: "hidden",
                ...style,
            }}
        >
            <div
                style={{
                    maxWidth: "100%",
                    maxHeight: "100%",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    padding: margin,
                }}
            >
                <QRCodeSVG
                    value={getQRValue()}
                    size={size}
                    bgColor={qrBackgroundColor}
                    fgColor={qrColor}
                    level={level}
                    includeMargin={includeMargin}
                />
            </div>
        </motion.div>
    )
}

// Framer Property Controls
addPropertyControls(QRCodeGenerator, {
    // Source Type Selection
    sourceType: {
        type: ControlType.Enum,
        title: "QR Type",
        options: ["url", "text", "email", "phone", "sms", "wifi", "vcard"],
        optionTitles: ["URL", "Text", "Email", "Phone", "SMS", "WiFi", "vCard"],
        defaultValue: "url",
    },

    // URL source
    source: {
        type: ControlType.String,
        title: "URL",
        defaultValue: "https://framer.com",
        placeholder: "https://example.com",
        hidden: (props) => props.sourceType !== "url",
    },

    // Text source
    customText: {
        type: ControlType.String,
        title: "Text",
        defaultValue: "Your custom text here",
        placeholder: "Enter your text",
        hidden: (props) => props.sourceType !== "text",
    },

    // Email source
    customEmail: {
        type: ControlType.String,
        title: "Email",
        defaultValue: "hello@example.com",
        placeholder: "email@example.com",
        hidden: (props) => props.sourceType !== "email",
    },

    // Phone source
    customPhone: {
        type: ControlType.String,
        title: "Phone",
        defaultValue: "+1234567890",
        placeholder: "+1234567890",
        hidden: (props) =>
            props.sourceType !== "phone" && props.sourceType !== "sms",
    },

    // WiFi settings
    wifiName: {
        type: ControlType.String,
        title: "WiFi Name",
        defaultValue: "My WiFi",
        placeholder: "Network SSID",
        hidden: (props) => props.sourceType !== "wifi",
    },
    wifiPassword: {
        type: ControlType.String,
        title: "Password",
        defaultValue: "password123",
        placeholder: "WiFi Password",
        hidden: (props) => props.sourceType !== "wifi",
    },
    wifiType: {
        type: ControlType.Enum,
        title: "Security",
        options: ["WPA", "WEP", "nopass"],
        optionTitles: ["WPA/WPA2", "WEP", "None"],
        defaultValue: "WPA",
        hidden: (props) => props.sourceType !== "wifi",
    },

    // vCard settings
    vName: {
        type: ControlType.String,
        title: "Name",
        defaultValue: "John Doe",
        hidden: (props) => props.sourceType !== "vcard",
    },
    vPhone: {
        type: ControlType.String,
        title: "Phone",
        defaultValue: "+1234567890",
        hidden: (props) => props.sourceType !== "vcard",
    },
    vEmail: {
        type: ControlType.String,
        title: "Email",
        defaultValue: "john@example.com",
        hidden: (props) => props.sourceType !== "vcard",
    },
    vCompany: {
        type: ControlType.String,
        title: "Company",
        defaultValue: "Acme Inc",
        hidden: (props) => props.sourceType !== "vcard",
    },
    vTitle: {
        type: ControlType.String,
        title: "Job Title",
        defaultValue: "Designer",
        hidden: (props) => props.sourceType !== "vcard",
    },
    vWebsite: {
        type: ControlType.String,
        title: "Website",
        defaultValue: "https://example.com",
        hidden: (props) => props.sourceType !== "vcard",
    },

    // QR Code appearance
    size: {
        type: ControlType.Number,
        title: "QR Size",
        defaultValue: 160,
        min: 64,
        max: 1024,
        step: 8,
        displayStepper: true,
    },
    level: {
        type: ControlType.Enum,
        title: "Error Correction",
        options: ["L", "M", "Q", "H"],
        optionTitles: [
            "Low (7%)",
            "Medium (15%)",
            "Quartile (25%)",
            "High (30%)",
        ],
        defaultValue: "M",
        description: "Higher levels allow more damage to the QR code",
    },
    qrColor: {
        type: ControlType.Color,
        title: "QR Color",
        defaultValue: "#000000",
    },
    qrBackgroundColor: {
        type: ControlType.Color,
        title: "QR Background",
        defaultValue: "#ffffff",
    },

    // Container styling
    bgColor: {
        type: ControlType.Color,
        title: "Container Color",
        defaultValue: "#ffffff",
    },
    margin: {
        type: ControlType.Number,
        title: "Margin",
        defaultValue: 4,
        min: 0,
        max: 50,
        step: 1,
        displayStepper: true,
    },
    cornerRadius: {
        type: ControlType.Number,
        title: "Corner Radius",
        defaultValue: 0,
        min: 0,
        max: 100,
        step: 1,
    },
    includeMargin: {
        type: ControlType.Boolean,
        title: "QR Internal Margin",
        defaultValue: true,
    },
})