import React, { useState, useRef, useEffect } from "react";
import jsQR from "jsqr";
import { getImageUrl } from "../helpers/itemHelper";
import { getTables, updateTable, createTable } from "../helpers/tableHelper";
import {
  getCafe,
  saveCafeDetails,
  setConfirmationStatus,
} from "../helpers/cafeHelpers";
import Switch from "react-switch"; // Import the Switch component

const SetPaymentQr = ({ shop }) => {
  const [initialPos, setInitialPos] = useState({
    left: shop.xposition,
    top: shop.yposition,
  });

  const [isConfigFont, setIsConfigFont] = useState(false);
  const [fontsize, setfontsize] = useState(shop.fontsize);
  const [fontcolor, setfontcolor] = useState(shop.fontcolor);
  const [initialFontPos, setInitialFontPos] = useState({
    left: shop.fontxposition,
    top: shop.fontyposition,
  });

  const [initialSize, setInitialSize] = useState(shop.scale);
  const [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground));
  const qrBackgroundInputRef = useRef(null);
  const shopUrl = window.location.hostname + "/" + shop.cafeId;

  const generateQRCodeUrl = (tableCode) => {
    if (tableCode != null) {
      return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
        shopUrl + "/" + tableCode
      )}`;
    } else {
      return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
        shopUrl
      )}`;
    }
  };

  const [isConfig, setIsConfig] = useState(false);
  const [isConfigQR, setIsConfigQR] = useState(false);
  const [isViewTables, setIsViewTables] = useState(false);

  const [tables, setTables] = useState([]);

  const [selectedTable, setSelectedTable] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        console.log(shop);
        const fetchedTables = await getTables(shop.cafeId);
        setTables(fetchedTables);
      } catch (error) {
        console.error("Error fetching tables:", error);
      }
    };

    fetchData();
  }, [shop.cafeId]);

  const handleSave = () => {
    const qrBackgroundFile = qrBackgroundInputRef.current.files[0]; // Get the selected file for qrBackground

    // Prepare the details object
    const details = {
      qrSize: initialSize,
      qrPosition: initialPos,
      qrBackgroundFile,
      fontsize,
      fontcolor,
      fontPosition: initialFontPos,
    };

    // Call saveCafeDetails function with the updated details object
    saveCafeDetails(shop.cafeId, details)
      .then((response) => {
        console.log("Cafe details saved:", response);
      })
      .catch((error) => {
        console.error("Error saving cafe details:", error);
      });
  };


  const handlePositionChange = (e) => {
    const { name, value } = e.target;
    setInitialPos((prevPosition) => ({
      ...prevPosition,
      [name]: parseFloat(value).toFixed(2),
    }));
  };

  const handleFontPositionChange = (e) => {
    const { name, value } = e.target;
    setInitialFontPos((prevPosition) => ({
      ...prevPosition,
      [name]: parseFloat(value).toFixed(2),
    }));
  };

  const handleSizeChange = (e) => {
    setInitialSize(parseFloat(e.target.value).toFixed(2));
  };

  const handleFontSizeChange = (e) => {
    setfontsize(parseFloat(e.target.value).toFixed(2));
  };

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const newBgImage = URL.createObjectURL(file); // Create a temporary URL for display
      setBgImageUrl(newBgImage);
    }
  };

  return (
    <div style={styles.container}>
      <h3 style={styles.title}>QR kedai dan meja</h3>

      <div
        id="qr-code-container"
        style={{
          background: `center center / contain no-repeat url(${bgImageUrl})`,
          backgroundSize: "contain",
          border: "1px solid #ddd",

          ...styles.qrCodeContainer,
          backgroundImage: `url(${bgImageUrl})`,
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
          backgroundSize: "contain",
        }}
      >
        <img
          src={generateQRCodeUrl(selectedTable?.tableCode || null)}
          alt="QR Code"
          style={{
            position: "absolute",
            width: `${initialSize}%`,
            left: `${initialPos.left}%`,
            top: `${initialPos.top}%`,
            transform: "translate(-50%, -50%)",
          }} />
        <div style={{
          transformOrigin: 'left',
          transform: `scaleX(${initialFontPos.left > 50 ? -1 : 1})`,
          position: "absolute",
          fontSize: `${fontsize * 3}%`,
          left: `${initialFontPos.left}%`,
          top: `${initialFontPos.top}%`,
          textAlign: initialFontPos.left > 50 ? 'right' : 'left'
        }}>
          <h1 style={{
            transform: `scaleX(${initialFontPos.left > 50 ? -1 : 1})`,
            width: '200%',
            lineHeight: 0,
            fontFamily: 'Plus Jakarta Sans',
            color: fontcolor
          }} >{selectedTable == null ? 'Nomor meja' : selectedTable.tableNo}</h1>
        </div>
        <input
          type="file"
          accept="image/*"
          ref={qrBackgroundInputRef}
          style={{ display: "none" }}
          onChange={handleFileChange}
        />
      </div>
      <div style={styles.uploadMessage}>
        <p>Klik untuk ganti background</p>
      </div>
      <div style={styles.resultMessage}>
        <p onClick={() => setIsConfig(!isConfig)}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
        <div
          onClick={() => qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Ganti</div>
      </div>
      <div style={styles.switchContainer}>
        {isConfig &&
          <div style={{ marginLeft: '15px' }}>
            <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
              {isConfigQR ? '˅' : '˃'} Konfigurasi QR
            </p>
            {isConfigQR && <>
              <div style={styles.sliderContainer}>
                <label style={styles.label}>
                  QR Code Size:
                  <div style={styles.sliderWrapper}>
                    <span style={styles.labelStart}>10%</span>
                    <input
                      type="range"
                      step="0.25"
                      min="10"
                      max="100"
                      value={initialSize}
                      onChange={handleSizeChange}
                      style={styles.input}
                    />
                    <span style={styles.value}>{initialSize}%</span>
                  </div>
                </label>
              </div>
              <div style={styles.sliderContainer}>
                <label style={styles.label}>
                  QR Code Position X:
                  <div style={styles.sliderWrapper}>
                    <span style={styles.labelStart}>0%</span>
                    <input
                      type="range"
                      step="0.25"
                      name="left"
                      min="0"
                      max="100"
                      value={initialPos.left}
                      onChange={handlePositionChange}
                      style={styles.input}
                    />
                    <span style={styles.value}>{initialPos.left}%</span>
                  </div>
                </label>
              </div>
              <div style={styles.sliderContainer}>
                <label style={styles.label}>
                  QR Code Position Y:
                  <div style={styles.sliderWrapper}>
                    <span style={styles.labelStart}>0%</span>
                    <input
                      type="range"
                      step="0.25"
                      name="top"
                      min="0"
                      max="100"
                      value={initialPos.top}
                      onChange={handlePositionChange}
                      style={styles.input}
                    />
                    <span style={styles.value}>{initialPos.top}%</span>
                  </div>
                </label>
              </div>
            </>}

            <p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}>
              {isConfigFont ? '˅' : '˃'} Konfigurasi nomor
            </p>
            {isConfigFont && (
              <>
                <div style={styles.sliderContainer}>
                  <label style={styles.label}>
                    Ukuran nomor meja:
                    <div style={styles.sliderWrapper}>
                      <span style={styles.labelStart}>10%</span>
                      <input
                        type="range"
                        step="0.25"
                        min="10"
                        max="100"
                        value={fontsize}
                        onChange={handleFontSizeChange}
                        style={styles.input}
                      />
                      <span style={styles.value}>{fontsize}%</span>
                    </div>
                  </label>
                </div>
                <div style={styles.sliderContainer}>
                  <label style={styles.label}>
                    Posisi nomor meja - horizontal:
                    <div style={styles.sliderWrapper}>
                      <span style={styles.labelStart}>0%</span>
                      <input
                        type="range"
                        step="0.25"
                        name="left"
                        min="0"
                        max="100"
                        value={initialFontPos.left}
                        onChange={handleFontPositionChange}
                        style={styles.input}
                      />
                      <span style={styles.value}>{initialFontPos.left}%</span>
                    </div>
                  </label>
                </div>
                <div style={styles.sliderContainer}>
                  <label style={styles.label}>
                    Posisi nomor meja - vertikal:
                    <div style={styles.sliderWrapper}>
                      <span style={styles.labelStart}>0%</span>
                      <input
                        type="range"
                        step="0.25"
                        name="top"
                        min="0"
                        max="100"
                        value={initialFontPos.top}
                        onChange={handleFontPositionChange}
                        style={styles.input}
                      />
                      <span style={styles.value}>{initialFontPos.top}%</span>
                    </div>
                  </label>
                </div>
                <div style={styles.sliderContainer}>
                  <label style={styles.label}>
                    Warna nomor meja:
                    <div style={styles.sliderWrapper}>
                      <input
                        type="color"
                        value='#FFFFFF' // This should be the state holding the selected font color
                        onChange={(e) => setfontcolor(e.target.value)} // Update the font color state
                        style={styles.colorInput} // Add your styles for the color input if needed
                      />
                      <span style={styles.value}>{fontcolor}</span> {/* Display the selected color value */}
                    </div>
                  </label>
                </div>
              </>
            )}


          </div>
        }
        <p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}>
          {isViewTables ? '˅' : '˃'} Daftar meja
        </p>

        {isViewTables &&
          <div style={{marginTop: '34px', marginLeft: '15px'}}>
            <div style={styles.resultMessage}>
              <input style={{borderRadius: '12px', paddingLeft: '13px'}} placeholder="Meja A1"/>
              <div
                onClick={() => qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Buat meja</div>
            </div>
            {tables && tables
              .filter((table) => table.tableNo !== 0)
              .map((table) => (
                <li
                  key={table.tableId}
                  style={{
                    backgroundColor:
                      table.tableId === selectedTable?.tableId
                        ? "lightblue"
                        : "white",
                    marginBottom: "10px",
                    padding: "10px",
                    borderRadius: "4px",
                    boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
                    cursor: "pointer",
                    listStyle: 'square'
                  }}
                  onClick={() => setSelectedTable(selectedTable == table ? null : table)}
                >
                  <div style={{ marginBottom: "10px" }}>
                    {table.tableNo}
                  </div>
                </li>
              ))
            }
          </div>
        }
      </div>

      <div style={styles.buttonContainer}>
        <button onClick={handleSave} style={styles.saveButton}>
          Simpan
        </button>
      </div>
    </div>
  );
};

// Styles
const styles = {
  container: {
    width: '100%',
    backgroundColor: "white",
    padding: "20px",
    borderRadius: "8px",
    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
    textAlign: "center", // Center text and children
  },
  title: {
    marginBottom: "20px",
    fontWeight: "bold",
  },
  qrCodeContainer: {
    backgroundColor: '#999999',
    borderRadius: '20px',
    position: "relative",
    width: "100%",
    height: "200px",
    backgroundSize: "contain",
    overflow: "hidden",
    margin: "0 auto", // Center the QR code container
  },
  uploadMessage: {
    fontWeight: 600,
    textAlign: "left",
  },
  uploadButton: {
    paddingRight: '10px',
    backgroundColor: 'green',
    borderRadius: '30px',
    color: 'white',
    fontWeight: 700,
    height: '36px',
    lineHeight: '36px',
    paddingLeft: '10px',
    paddingHeight: '10px',
  },
  resultMessage: {
    marginTop: "-24px",
    textAlign: "left",
    display: 'flex',
    justifyContent: 'space-between'
  },
  buttonContainer: {
    marginTop: "20px",
    textAlign: "left",
  },
  saveButton: {
    padding: "10px 20px",
    fontSize: "16px",
    backgroundColor: "#28a745",
    color: "#fff",
    border: "none",
    borderRadius: "30px",
    cursor: "pointer",
    transition: "background-color 0.3s",
  },
  switchContainer: {
    textAlign: "left",
    marginTop: '-15px'
  },
  description: {
    margin: "10px 0",
  },
  sliderContainer: {
    marginBottom: "20px",
  },
  label: {
    display: "block",
    marginBottom: "10px",
  },
  sliderWrapper: {
    display: "flex",
    alignItems: "center",
  },
  input: {
    flex: "1",
    margin: "0 10px",
  },
};

export default SetPaymentQr;