import Swal from 'sweetalert2';
import AllMapDataStore from '@/stores/allMapData.js';
import ConformanceStore from '@/stores/conformance.js';
import FilesStore from '@/stores/files.js';
import PageAdminStore from '@/stores/pageAdmin.js';
import { useModalStore } from '@/stores/modal.js';

const customClass = {
  container: '!z-[99999]',
  popup: '!w-[564px]',
  title: '!text-xl !font-semibold !mb-2',
  htmlContainer: '!text-sm !font-normal !h-full !mb-4 !leading-5',
  inputLabel: '!text-sm !font-normal',
  input: '!h-8 !text-sm !font-normal !shadow-inner !shadow-black !border-neutral-200',
  validationMessage: '!bg-neutral-10 !text-danger',
  confirmButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px]',
  cancelButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] ',
};
/**
 * Map Saved
 * @param { function } addFilterId 後端 API
 */
export async function saveFilter(addFilterId, next = null) {
  let fileName = '';
  const pageAdminStore = PageAdminStore();

  const { value, isConfirmed } = await Swal.fire({
    title: 'SAVE NEW FILTER',
    input: 'text',
    inputPlaceholder: 'Enter Filter Name.',
    inputValue: fileName,
    inputAttributes: {
      'maxlength': 200,
    },
    inputValidator: (value) => {
      if (!value) return 'You need to write something!';
      fileName = value;
    },
    icon: 'info',
    iconHtml: '<span class="material-symbols-outlined !text-[58px]">cloud_upload</span>',
    iconColor: '#0099FF',
    reverseButtons:true,
    confirmButtonColor: '#0099FF',
    showCancelButton: true,
    cancelButtonColor: '#94a3b8',
    customClass: customClass,
  });
  // 透過回傳值判斷要不要轉址
  if(isConfirmed) { // 存檔成功
    await addFilterId(fileName);
    // 顯示儲存完成
    if (value) { // Example of value: yes
      savedSuccessfully(value);
    }
    // 清空欄位
    fileName = '';
    return true;
  } else { // 點擊取消或空白處，為存檔失敗。
    pageAdminStore.keepPreviousPage();

    // Not every time we have nontrivial next value
    if (next !== null) {
      next(false);
  }
    return false;
  }
}
/**
 * Saved Success
 * @param { string } value File's name
 */
export async function savedSuccessfully(value) {
  value = value || '';
  await Swal.fire({
    title: 'SAVE COMPLETE',
    html: `<span class="text-primary">${value}</span> has been saved in Lucia.`,
    timer: 3000, // 停留 3 秒後自動關閉
    showConfirmButton: false,
    icon: 'success',
    iconColor: '#0099FF',
    customClass: customClass
  })
};
/**
 * leave Map page
 * @param { function } next 執行完函式後的步驟
 * @param { function } addFilterId 後端 API
 * @param { string } toPath route path
 * @param { function } logOut 登出函式
 */
export async function leaveFilter(next, addFilterId, toPath, logOut) {
  const allMapDataStore = AllMapDataStore();
  const pageAdminStore = PageAdminStore();

  const result = await Swal.fire({
    title: 'SAVE YOUR FILTER?',
    html: 'If you want to continue using this filter in any other page, please select [Yes].',
    icon: 'warning',
    iconColor: '#FF3366',
    reverseButtons:true,
    confirmButtonText: 'Yes',
    confirmButtonColor: '#FF3366',
    showCancelButton: true,
    cancelButtonText: 'No',
    cancelButtonColor: '#94a3b8',
    customClass: customClass,
  });

  if(result.isConfirmed) {
    if(allMapDataStore.createFilterId) {
      await allMapDataStore.updataFilter();
      if(allMapDataStore.isUpdataFilter) {
        await savedSuccessfully(allMapDataStore.filterName);
      }
    } else {
      // Dangerous, here shows a modal
      await saveFilter(addFilterId, next);
    }

    logOut ? logOut() : next(toPath);
  } else if(result.dismiss === 'cancel') {
    // console.log('popup cancel case', );
    // Handle page admin issue
    // console.log("PageAdminStore.activePage", PageAdminStore.activePage);
    pageAdminStore.keepPreviousPage();

    allMapDataStore.tempFilterId = null;
    logOut ? logOut() : next(toPath);
  } else if(result.dismiss === 'backdrop') {
    // console.log('popup backdrop case', );
    // Handle page admin issue
    // console.log("PageAdminStore.activePage", PageAdminStore.activePage);
    pageAdminStore.keepPreviousPage();

    if(!logOut){
      next(false);
    };
  }

};
/**
 * Conformance Saved
 * @param { function } addConformanceCreateCheckId 後端 API
 */
export async function saveConformance(addConformanceCreateCheckId) {
  let fileName = '';
  const { value, isConfirmed } = await Swal.fire({
    title: 'SAVE NEW RULE',
    input: 'text',
    inputPlaceholder: 'Enter Rule Name.',
    inputValue: fileName,
    inputAttributes: {
      'maxlength': 200,
    },
    inputValidator: (value) => {
      if (!value) return 'You need to write something!';
      fileName = value;
    },
    icon: 'info',
    iconHtml: '<span class="material-symbols-outlined !text-[58px]">cloud_upload</span>',
    iconColor: '#0099FF',
    reverseButtons:true,
    confirmButtonColor: '#0099FF',
    showCancelButton: true,
    cancelButtonColor: '#94a3b8',
    customClass: customClass,
  });
  // 透過回傳值判斷要不要轉址
  if(isConfirmed) { // 存檔成功
    await addConformanceCreateCheckId(fileName);
    // 顯示儲存完成
    if (value) savedSuccessfully(value);
    // 清空欄位
    fileName = '';
    return true;
  } else { // 點擊取消或空白處，為存檔失敗。
    return false;
  }
}
/**
 * leave Conformance page
 * @param { function } next 執行完函式後的步驟
 * @param { function } addConformanceCreateCheckId 後端 API
 * @param { string } toPath route path
 * @param { function } logOut 登出函式
 */
export async function leaveConformance(next, addConformanceCreateCheckId, toPath, logOut) {
  const conformanceStore = ConformanceStore();
  const result = await showConfirmationDialog();
  
  if (result.isConfirmed) {
    await handleConfirmed(conformanceStore, addConformanceCreateCheckId);
  } else {
    await handleDismiss(result.dismiss, conformanceStore, next, toPath, logOut);
  }
}
async function showConfirmationDialog() {
  return Swal.fire({
    title: 'SAVE YOUR RULE?',
    icon: 'warning',
    iconColor: '#FF3366',
    reverseButtons: true,
    confirmButtonText: 'Yes',
    confirmButtonColor: '#FF3366',
    showCancelButton: true,
    cancelButtonText: 'No',
    cancelButtonColor: '#94a3b8',
    customClass: customClass
  });
}

async function handleConfirmed(conformanceStore, addConformanceCreateCheckId) {
  if (conformanceStore.conformanceFilterCreateCheckId || conformanceStore.conformanceLogCreateCheckId) {
    await conformanceStore.updataConformance();
    if (conformanceStore.isUpdataConformance) {
      await savedSuccessfully(conformanceStore.conformanceFileName);
    }
  } else {
    await saveConformance(addConformanceCreateCheckId);
  }
}

async function handleDismiss(dismissType, conformanceStore, next, toPath, logOut) {
  switch (dismissType) {
    case 'cancel':
      resetTempCheckId(conformanceStore);
      logOut ? logOut() : next(toPath);
      break;
    case 'backdrop':
      if (!logOut) {
        next(false);
      }
      break;
    default:
      break;
  }
}

function resetTempCheckId(conformanceStore) {
  conformanceStore.conformanceFilterTempCheckId = null;
  conformanceStore.conformanceLogTempCheckId = null;
}

/**
 * Upload failde First
 * @param { string } failureType 後端檔案錯誤類型
 * @param { string } failureMsg 後端檔案錯誤訊息
 */
export async function uploadFailedFirst(failureType, failureMsg, failureLoc) {
  // msg: 'not in UTF-8' | 'insufficient columns' | 'the csv file is empty' | 'the filename does not ends with .csv' | 'not a CSV file'
  // type: 'encoding' | 'insufficient_columns' | 'empty' | 'name_suffix' | mime_type
  let value = '';
  switch (failureType) {
    case 'size':
      value = 'File size exceeds 90MB.';
      break;
    case 'encoding':
      value = `Please use UFT-8 for character encoding: (Row #${failureLoc})`;
      break;
    case 'insufficient_columns':
      value = 'Need at least five columns of data.';
      break;
    case 'empty':
      value = 'Need at least one record of data.';
      break;
    case 'name_suffix':
    case 'mime_type':
      value = 'File is not in csv format.';
      break;
    default:
      value = failureMsg;
      break;
  }
  await Swal.fire({
    title: 'IMPORT FAILED',
    html: value,
    timer: 3000, // 停留 3 秒後自動關閉
    showConfirmButton: false,
    icon: 'error',
    iconColor: '#FF3366',
    customClass: customClass
  })
};
/**
 * Upload failde Second
 * @param { array } detail 後端回傳的失敗訊息
 */
export async function uploadFailedSecond(detail) {
  let srt = '';
  let manySrt = '';

  detail.forEach(i => {
    let content = '';
    let key = '';
    switch (i.type) {
      case 'too_many':
        manySrt = 'There are more errors.';
        break;
      case 'unrecognized':
        content = `<li>Data unregnizable in Status Column: (Row #${i.loc[1]}, "${i.input}")</li>`;
        break;
      case 'malformed':
        content = `<li>Data malformed in Timestamp Column: (Row #${i.loc[1]}, "${i.input}")</li>`;
        break;
      case 'missing':  
        switch (i.loc[2]) {
          case 'case id':
            key = 'Case ID';
            break;
          case 'timestamp':
            key = 'Timestamp';
            break;
          case 'name':
            key = 'Activity';
            break;
          case 'instance':
            key = 'Activity Instance ID';
            break;
          case 'status':
            key = 'Status';
            break;
          default:
            key = i.loc[2];
            break;
        }
        content = `<li>Data missing in ${key} Column: (Row #${i.loc[1]})</li>`;
      break;
    }
    srt += content;
  });
  await Swal.fire({
    title: 'IMPORT FAILED',
    html: `<div class="text-left mx-3 space-y-1"><p>Error(s) detected:</p><ul class="list-disc ml-6">${srt}</ul><p>${manySrt} Please check.</p></div>`,
    timer: 3000, // 停留 3 秒後自動關閉
    showConfirmButton: false,
    icon: 'error',
    iconColor: '#FF3366',
    customClass: customClass
  });
  srt = '';
};
/**
 * Upload Success
 * @param { string } value File's name
 */
export async function uploadSuccess() {
  await Swal.fire({
    title: 'IMPORT COMPLETED',
    timer: 3000, // 停留 3 秒後自動關閉
    showConfirmButton: false,
    icon: 'success',
    iconColor: '#0099FF',
    customClass: customClass
  })
};
/**
 * Confirm whether to upload the file
 * @param { object } fetchData 後端 API POST data
 */
export async function uploadConfirm(fetchData) {
  const filesStore = FilesStore();
  const result = await Swal.fire({
    title: 'ARE YOU SURE?',
    html: 'After importing, you won’t be able to modify labels.',
    icon: 'warning',
    iconColor: '#FF3366',
    reverseButtons:true,
    confirmButtonText: 'Yes',
    confirmButtonColor: '#FF3366',
    showCancelButton: true,
    cancelButtonText: 'No',
    cancelButtonColor: '#94a3b8',
    customClass: customClass,
  });

  if(result.isConfirmed) {
    filesStore.uploadLog(fetchData);
  }
};
/**
 * Upload loader
 */
export async function uploadloader() {
  await Swal.fire({
    html: '<span class="loaderBar mt-7"></span>',
    showConfirmButton: false,
    allowOutsideClick: false,
    customClass: customClass,
  })
};
/**
 * Rename Modal
 * @param { function } rename 後端 API
 * @param { string } type File 檔案類型
 * @param { number } id File ID
 * @param { string } baseName 改名前的檔名
 */
export async function renameModal(rename, type, id, baseName) {
  let fileName = baseName;
  const { value, isConfirmed } = await Swal.fire({
    title: 'RENAME',
    input: 'text',
    inputPlaceholder: 'Enter File Name.',
    inputValue: fileName,
    inputAttributes: {
      'maxlength': 200,
    },
    icon: 'info',
    iconHtml: '<span class="material-symbols-outlined !text-[58px]">edit_square</span>',
    iconColor: '#0099FF',
    reverseButtons: true,
    confirmButtonColor: '#0099FF',
    showCancelButton: '#94a3b8',
    customClass: customClass,
    didOpen: () => {
      const confirmButton = Swal.getConfirmButton();
      const inputField = Swal.getInput();

      inputField.addEventListener('input', function() {
        if (!inputField.value.trim()) {
          confirmButton.classList.add('disable-hover');
          confirmButton.disabled = true;
        } else {
          confirmButton.classList.remove('disable-hover');
          confirmButton.disabled = false;
        }
      });
    }
  });

  // 改名成功
  if(isConfirmed) await rename(type, id, value);
  // 清空欄位 fileName = '';
}
/**
 * Delete File
 * @param { string } files 有關連的檔案
 * @param { string } type  File 檔案類型
 * @param { number } id    File ID
 * @param { string } name 原本的檔案
 */
export async function deleteFileModal(files, type, id, name) {
  const filesStore = FilesStore();

  let htmlText = files.length === 0 ? `Do you really want to delete <span class="text-primary">${name}</span>?` : `<div class="text-left mx-4 space-y-1"><p class="mb-2">Do you really want to delete <span class="text-primary">${name}</span>?</p><p>The following dependent file(s) will also be deleted:</p><ul class="list-disc ml-6">${files}</ul></div>`;

  const deleteCustomClass = { ...customClass };
  deleteCustomClass.confirmButton = '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] !text-danger !bg-neutral-10 !border !border-danger';

  const result = await Swal.fire({
    title: 'CONFIRM DELETION',
    html: htmlText,
    icon: 'warning',
    iconColor: '#FF3366',
    reverseButtons:true,
    confirmButtonColor: '#ffffff',
    showCancelButton: true,
    cancelButtonColor: '#FF3366',
    customClass: deleteCustomClass,
    didOpen: () => {
      const confirmButton = Swal.getConfirmButton();

      confirmButton.style.border = '1px solid #FF3366';
    }
  });

  if(result.isConfirmed) {
    filesStore.deleteFile(type, id);
  }
};
/**
 * Delete Success
 */
export async function deleteSuccess() {
  await Swal.fire({
    title: 'FILE(S) DELETED',
    timer: 3000, // 停留 3 秒後自動關閉
    showConfirmButton: false,
    icon: 'success',
    iconColor: '#0099FF',
    customClass: customClass
  })
};
/**
 * Really deleted information
 * @param {string} files 被刪除的檔案 html
 * @param {array} reallyDeldetData 被刪除的檔案 data，未取得 recordId 而傳入
 */
export async function reallyDeldetInformation(files, reallyDeldetData) {
  const filesStore = FilesStore();
  const deleteCustomClass = { ...customClass };
  const htmlText = `<div class="text-left mx-4 space-y-1"><p>The following file(s) have been deleted by other user(s):</p><ul class="list-disc ml-6">${files}</ul></div>`;

  deleteCustomClass.confirmButton = '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] !text-primary !bg-neutral-10 !border !border-primary';
  deleteCustomClass.cancelButton = null;
  await Swal.fire({
    title: 'FILE(S) DELETED BY OTHER USER(S)',
    html: htmlText,
    icon: 'info',
    iconColor: '#0099FF',
    customClass: deleteCustomClass,
    confirmButtonColor: '#ffffff',
    didOpen: () => {
      const confirmButton = Swal.getConfirmButton();

      confirmButton.style.border = '1px solid #0099FF';
    }
  });
  await Promise.all(reallyDeldetData.map(file => filesStore.deletionRecord(file.id)));
  await filesStore.fetchAllFiles();
}

/**
 * When user is leaving the acct mgmt page but hasn't finished editing,
 * we jump out this alert modal to remind her.
 */
export async function leaveAccountManagementToRemind(){
  const modalStore = useModalStore();
  const result = await Swal.fire({
    title: 'SAVE YOUR EDIT?',
    icon: 'info',
    showCancelButton: true,
    didOpen: () => {
      const confirmButton = Swal.getConfirmButton();

      confirmButton.style.border = '1px solid #0099FF';
    }
  });
  if(result.isConfirmed) {
    return;
  } else {
    modalStore.openModal();
  }
};