import Swal from 'sweetalert2';
import AllMapDataStore from '@/stores/allMapData.js';
import LoginStore from '@/stores/login.js';

const customClass = {
  htmlContainer: '!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] ',
};

// 帶入參數 pinia aciton this.sweetVal
export async function saveFilter(addFilterId) {
  let filterName = '';
  const { value, isConfirmed } = await Swal.fire({
    title: 'SAVE NEW FILTER',
    input: 'text',
    inputPlaceholder: 'Enter Filter Name.',
    inputValue: filterName,
    inputValidator: (value) => {
      if (!value) return 'You need to write something!';
      filterName = 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(filterName);
  // 顯示儲存完成
  if (value) savedSuccessfully(value);
  // 清空欄位
  filterName = '';
}

export async function savedSuccessfully(value) {
  await Swal.fire({
    title: 'SAVE COMPLETE',
    html: `<span class="text-primary">${value}</span> has been saved in Lucia.`,
    showConfirmButton: false,
    icon: 'success',
    iconColor: '#0099FF',
    customClass: customClass
  })
};

export async function leaveFilter(next, addFilterId, toPath) {
  const allMapDataStore = AllMapDataStore();
  const result = await Swal.fire({
    title: 'ARE YOU SURE TO LEAVE MAP?',
    html: 'Filter settings have not been saved.</br>Click “Save as” to save filtered results, “OK” to leave map.',
    icon: 'warning',
    iconColor: '#FF3366',
    reverseButtons:true,
    confirmButtonText: 'Save as',
    confirmButtonColor: '#FF3366',
    showCancelButton: true,
    cancelButtonText: 'OK',
    cancelButtonColor: '#94a3b8',
    customClass: customClass
  })
  if(result.isConfirmed) {
    await saveFilter(addFilterId)
    next(toPath);
  } else if(result.dismiss === 'cancel') {
    allMapDataStore.tempFilterId = null;
    next(toPath);
  } else if(result.dismiss === 'backdrop') {
    next(false);
  }
};

export async function logoutLeave(addFilterId) {
  const allMapDataStore = AllMapDataStore();
  const loginStore = LoginStore();
  const result = await Swal.fire({
    title: 'ARE YOU SURE TO LEAVE MAP?',
    html: 'Filter settings have not been saved.</br>Click “Save as” to save filtered results, “OK” to leave map.',
    icon: 'warning',
    iconColor: '#FF3366',
    reverseButtons:true,
    confirmButtonText: 'Save as',
    confirmButtonColor: '#FF3366',
    showCancelButton: true,
    cancelButtonText: 'OK',
    cancelButtonColor: '#94a3b8',
    customClass: customClass
  })
  if(result.isConfirmed) {
    await saveFilter(addFilterId);
    // allMapDataStore.tempFilterId = await null;
    // allMapDataStore.temporaryData = await [];
    // allMapDataStore.postRuleData = await [];
    // allMapDataStore.ruleData = await [];
    // await loginStore.logOut()
  } else if(result.dismiss === 'cancel') {
    allMapDataStore.tempFilterId = await null;
    // allMapDataStore.temporaryData = await [];
    // allMapDataStore.postRuleData = await [];
    // allMapDataStore.ruleData = await [];
    await loginStore.logOut()
  }
}
