<template>
  <div style="display: flex;">
  
    <gc-spread-sheets class="spread-host" @workbookInitialized="initWorkbook"></gc-spread-sheets>

    <div class="options-container">
      <p>Open Excel Files (.xlsx)</p>
      <input type="file" @change="changeFileDemo" />
      <input type="button" value="Import" class="button" @click="loadExcel" />

      <p style="margin-top: 20px;">Worksheet Protection</p>
      <input type="button" value="Protect" class="button" @click="setProtectSheet" />
      <input type="button" value="Unprotect" class="button" @click="setUnprotectSheet" />
    </div>
  </div>
</template>

<script>
import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-vue";
import "@mescius/spread-sheets-io";

import { ref } from "vue";

export default {
  name: "App",
  setup() {
    let spread = null;
    const selectedFile = ref(null);
    const password = "1111";

    function initWorkbook(spreadInstance) {
      spread = spreadInstance;
      const sheet = spread.getActiveSheet();
      sheet.setValue(0, 0, "Vue + SpreadJS Excel Viewer");
      sheet.setValue(1, 0, "Import an Excel file to view it below.");
    }

    function changeFileDemo(e) {
      selectedFile.value = e.target.files[0];
    }

    function loadExcel() {
      if (!selectedFile.value) {
        alert("Please select a file first!");
        return;
      }

      const fileName = selectedFile.value.name.toLowerCase();
      const fileExt = fileName.split(".").pop();
      const fileType =
        fileExt === "xlsx"
          ? GC.Spread.Sheets.FileType.excel
          : GC.Spread.Sheets.FileType.ssjson;

      spread.import(
        selectedFile.value,
        () => {
          console.log("File Loaded Successfully");
          protectWorkbook();
        },
        (err) => {
          console.error("Import failed:", err);
          alert("Failed to import Excel file.");
        },
        { fileType }
      );
    }

   function protectWorkbook() {
  const sheetCount = spread.getSheetCount();
  for (let i = 0; i < sheetCount; i++) {
    const sheet = spread.getSheet(i);
    sheet.options.isProtected = true;
    sheet.options.protectionOptions = {
      allowSelectLockedCells: true,
      allowSelectUnlockedCells: true,
      allowSort: false,
      allowFilter: false,
      allowEditObjects: false,
      allowResizeRows: false,
      allowResizeColumns: false,
      allowInsertRows: false,
      allowDeleteRows: false,
      allowInsertColumns: false,
      allowDeleteColumns: false,
    };
    sheet.protect(password); 
  }
  console.log("All sheets are protected with custom options.");
  alert("Workbook imported and protected with password");
}

function setProtectSheet() {
  const sheet = spread.getActiveSheet();
  if (sheet.options.isProtected) {
    alert("The worksheet is already protected!");
    return;
  }
  sheet.options.protectionOptions = {
    allowSelectLockedCells: true,
    allowSelectUnlockedCells: true,
    allowSort: false,
    allowFilter: false,
    allowEditObjects: false,
    allowResizeRows: false,
    allowResizeColumns: false,
    allowInsertRows: false,
    allowDeleteRows: false,
    allowInsertColumns: false,
    allowDeleteColumns: false,
  };
  sheet.protect(password);
  alert("Sheet protected with custom options!");
}

function setUnprotectSheet() {
  const sheet = spread.getActiveSheet();
  if (!sheet.options.isProtected) {
    alert("Sheet is already unprotected!");
    return;
  }

  const userPassword = prompt("Enter the password to unprotect this sheet:");
  if (userPassword === null) return;

  const success = sheet.unprotect(userPassword);
  if (!success) {
    alert("Incorrect password!");
  } else {
    alert("Sheet unprotected successfully!");
  }
}

function setUnprotectSheet() {
  const sheet = spread.getActiveSheet();
  if (!sheet.options.isProtected) {
    alert("Sheet is already unprotected!");
    return;
  }

  // Ask user for password
  const userPassword = prompt("Enter the password to unprotect this sheet:");
  if (userPassword === null) return; // user cancelled

  const success = sheet.unprotect(userPassword);
  if (!success) {
    alert("Incorrect password!");
  } else {
    alert("Sheet unprotected successfully!");
  }
}


    return {
      initWorkbook,
      changeFileDemo,
      loadExcel,
      setProtectSheet,
      setUnprotectSheet,
    };
  },
};
</script>

<style>
.spread-host {
  width: calc(100% - 300px);
  height: 580px;
  float: left;
  box-sizing: border-box;
}

.options-container {
  width: 280px;
  padding: 12px;
  height: 600px;
  box-sizing: border-box;
  background: #fbfbfb;
  overflow-y: auto;
  float: right;
  border-left: 1px solid #ddd;
}

.inputContainer,
.options-container input[type="file"] {
  display: block;
  margin-bottom: 10px;
}

.button {
  display: inline-block;
  padding: 8px 16px;
  margin-top: 6px;
  margin-right: 10px; 
  background-color: #007bff;
  color: #fff;
  border: 1px solid #007bff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s, color 0.2s;
}

.button:hover {
  background-color: #0056b3;
  border-color: #0056b3;
  color: #fff;
}
</style>
