const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    header: {
      text: "Investment Country"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    editButtonVisibility: "always",
    editor: {
      type: "date"
    },
    header: {
      text: "date editor",
      styleName: "orange-color"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "110",
    header: {
      text: "currency",
      styleName: "orange-color"
    },
    numberFormat: "currency"
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "110",
    header: {
      text: "number",
      styleName: "orange-color"
    },
    numberFormat: "number"
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "110",
    header: {
      text: "accounting",
      styleName: "orange-color"
    },
    numberFormat: "accounting"
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "120",
    header: {
      text: "USD",
      styleName: "orange-color"
    },
    numberFormat: "USD"
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date",
      showTooltip: true,
      tooltip: "Payment date tooltip."
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  }
];

const message = {
  "en": {
    dateEditorWeekDays: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
    dateEditorMonths: ['Jun', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    dateEditorSaveLabel: 'Save',
    dateEditorCancelLabel: 'Cancel',
    dateEditorDeleteLabel: 'Delete',
    dateEditorTodayLabel: 'Today',
    dateEditorHourLabel: 'Ho',
    dateEditorMinuteLabel: 'Mi',
    dateEditorSecondLabel: 'Se',
    dateEditorYearDisplayFormat: '{Y}',
    searchEditorMoreText: "more",
    checkListAcceptText: "Accept",
    checkListCancelText: "Cancel",
    checkListAllCheckText: "Check All",
    filterSelectorAcceptText: "Accept",
    filterSelectorAllCheckText: "(All Select)",
    filterSelectorCancelText: "Cancel",
    filterSelectorEmptyFilterText: "(Empty Value)",
    filterSelectorFilterResetText: "Reset",
    filterSelectorFiltersResetText: "Reset All",
    filterSelectorSearchPlaceholder: "Search...",
    filterSelectorSearchedCheckText: "(Search All Selected)",
    filterSelectorDateYearFormat: '{YYYY}',
    filterSelectorDateQuarterFormat: 'Q{Q}',
    filterSelectorDateMonthFormat: '{M}',
    filterSelectorDateDayFormat: 'YYYY-MM-DD',
    dataDropProxyLabel: "${rows} rows ${mode}",
    dataDropModeCopy: "Move",
    dataDropModeMove: "Copy",
    groupingPrompt: "Drag a column header and drop it here to group by that column.",
    displayEmptyMessage: "There is no data to display.",
    filterOperatorContains: "contains",
    filterOperatorNotContains: "not contains",
    filterOperatorStartsWith: "starts with",
    filterOperatorEndsWith: "ends width",
    filterOperatorEqual: "equal",
    filterOperatorNotEqual: "not Equal",
    filterOperatorEmpty: "empty Value",
    filterOperatorReset: "reset",
    filterOperatorGreater: "greater then",
    filterOperatorGreaterEqual: "greater then or equal",
    filterOperatorLower: "less then",
    filterOperatorLowerEqual: "less then or equal",
    filterOperatorBetween: "between"
  },
  "ko": {
    dateEditorCancelLabel: "Cancel",
    dateEditorDeleteLabel: "Delete",
    dateEditorHourLabel: "when",
    dateEditorMinuteLabel: "Minute",
    dateEditorSecondLabel: "Second",
    dateEditorMonths: ['1Mon', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    dateEditorSaveLabel: "Save",
    dateEditorTodayLabel: "Today",
    dateEditorWeekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Gold', 'Sat'],
    dateEditorYearDisplayFormat: '{Y}Year',
    dateEditorMonthDisplayFormat: '{M}Month',
    searchEditorMoreText: "More",
    checkListAcceptText: "Confirm",
    checkListCancelText: "Cancel",
    checkListAllCheckText: "Select All",
    filterSelectorAcceptText: "Confirm",
    filterSelectorAllCheckText: "(Select All)",
    filterSelectorCancelText: "Cancel",
    filterSelectorEmptyFilterText: "(No Value)",
    filterSelectorFilterResetText: "Reset",
    filterSelectorFiltersResetText: "Reset All",
    filterSelectorSearchPlaceholder: "Search...",
    filterSelectorSearchedCheckText: "(Query Select All)",
    filterSelectorDateYearFormat: '{YYYY}Year',
    filterSelectorDateQuarterFormat: '{Q}Quarter',
    filterSelectorDateMonthFormat: '{M}Month',
    filterSelectorDateDayFormat: 'YYYY-MM-DD',
    filterToastMessage: "Filtering...",
    dataDropProxyLabel: "${rows} rows ${mode}",
    dataDropModeCopy: "Move",
    dataDropModeMove: "Copy",
    groupingPrompt: "Drag and drop Column Header here to group by that Column.",
    groupingToastMessage: "Row grouping...",
    displayEmptyMessage: "No data to display.",
    filterOperatorContains: "Contains",
    filterOperatorNotContains: "Not Contains",
    filterOperatorStartsWith: "Starts With",
    filterOperatorEndsWith: "Ends With",
    filterOperatorEqual: "Equal",
    filterOperatorNotEqual: "Not Equal",
    filterOperatorEmpty: "No Value",
    filterOperatorReset: "Reset",
    filterOperatorGreater: "Greater Than",
    filterOperatorGreaterEqual: "Greater Than or Equal",
    filterOperatorLower: "Less Than",
    filterOperatorLowerEqual: "Less Than or Equal",
    filterOperatorBetween: "Range",
    invalidDatetimeFormat1: "Invalid date format. - 'H' and 'a' cannot coexist: ",
    invalidDatetimeFormat2: "Invalid date format - if 'h' exists, 'a' must also exist: ",
    commitEditingMessage: "Please complete editing first.",
    deleteRowsMessage: "Are you sure you want to delete the selected row(s)?",
    invalidFormatMessage: "Invalid input type.",
    decimalSeparator: ".",
    thousandsSeparator: ",",
    sortingToastMessage: "Sorting...",
    rowIndicatorHeadText: "No.",
    rowIndicatorFootText: "Σ",
    rowIndicatorSumText: "Σ",
    stateTextCreateAndDeleted: "X",
    stateTextCreated: "C",
    stateTextDeleted: "D",
    stateTextUpdated: "U",
    rowOutOfBounds: "row is out of bounds: ",
    fieldIndexOutOfBounds: "fieldIndex is out of bounds: ",
    fieldNameMustExists: "fieldName must be exists.",
    fieldNameAlreadyExists: "fieldName is already exists: ",
    clientEditingError: "Client is editing (call grid.commit() or grid.cancel() first)"
  },
  "ja": {
    dateEditorWeekDays: ['日', '月', '火', '水', '木', '金', '土'],
    displayEmptyMessage: '表示するデータはありません。',
    groupingPrompt: '列ヘッダーをこの位置にドラッグ＆ドロップすると,その列にグループ化されます。',
    dateEditorYearDisplayFormat: '{Y}年',
    dateEditorMonthDisplayFormat: '{M}月',
    dateEditorTodayLabel: '今日',
    dateEditorMonths: ['いちがつ', 'にがつ', 'さがつ', 'しがつ', 'ごがつ', 'ろくがつ', 'しちがつ', 'はちがつ', 'くがつ', 'じゅうがつ', 'じゅういちがつ', 'じゅうにがつ'],
    dateEditorSaveLabel: "セーブ",
    dateEditorCancelLabel: "取消",
    dateEditorDeleteLabel: "デリート",
    checkListAcceptText: "適用する",
    checkListCancelText: "取消",
    checkListAllCheckText: "全選択"
  },
  "fr": {
    dateEditorWeekDays: ['dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam'],
    dateEditorMonths: ['janv', 'févr', 'mars', 'avr', 'mai', 'juin', 'juil', 'août', 'sept', 'oct', 'nov', 'déc'],
    displayEmptyMessage: "Il n'y a aucune donnée à afficher"
  },
  "hi": {
    displayEmptyMessage: 'प्रदर्शित करने के लिए कोई डेटा नहीं है.',
    dateEditorWeekDays: ['रवि', 'सोम', 'मंगल', 'बुध', 'गुरु', 'शुक्र', 'शनि'],
    dateEditorMonths: ['जन॰', 'फ़र॰', 'मार्च', 'अप्रैल', 'मई', 'जून', 'जुल॰', 'अग॰', 'सित॰', 'अक्तू॰', 'नव॰', 'दिस॰'],
    groupingPrompt: "किसी कॉलम हेडर को खींचें और उसे उस कॉलम के आधार पर समूहित करने के लिए यहां छोड़ें।",
    dateEditorYearDisplayFormat: "{Y}वर्ष"
  }
};

const gridLocale = {
  "en-US": {
    locale: "en-US",
    currency: "USD",
    messages: message.en,
    numberFormats: {
      currency: {
        style: "currency",
        currency: "USD"
      },
      USD: {
        style: "currency",
        currency: "USD"
      }
    }
  },
  "en-CA": {
    locale: "en-CA",
    currency: "CAD",
    messages: message.en,
    numberFormats: {
      USD: {
        style: "currency",
        currency: "USD"
      }
    }
  },
  "fr-CA": {
    locale: "fr-CA",
    currency: "CAD",
    messages: message.fr,
    numberFormats: {
      USD: {
        style: "currency",
        currency: "USD"
      }
    }
  },
  "hi-IN": {
    locale: "hi-IN",
    currency: "INR",
    messages: message.hi,
    numberFormats: {
      USD: {
        style: "currency",
        currency: "USD"
      }
    }
  },
  "ko-KR": {
    locale: "ko-KR",
    currency: "KRW",
    messages: message.ko,
    numberFormats: {
      currency: {
        style: "currency",
        currency: "KRW",
        excelFormat: "₩#,##0"
      },
      accounting: {
        style: "currency",
        currency: "KRW",
        currencywhengn: "accounting",
        excelFormat: "\"₩\"#,##0_);[Red](\"₩\"#,##0)"
      },
      USD: {
        style: "currency",
        currency: "USD"
      }
    }
  },
  "ja-JP": {
    locale: "ja-JP",
    currency: "JPY",
    messages: message.ja,
    numberFormats: {
      USD: {
        style: "currency",
        currency: "USD"
      }
    }
  },
  "fr-FR": {
    locale: "fr-FR",
    currency: "EUR",
    messages: message.fr,
    numberFormats: {
      USD: {
        style: "currency",
        currency: "USD"
      }
    }
  }
};

RealGrid.setLocale(gridLocale["en-US"]);

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  display: {
    showEmptyMessage: true,
    rowHeight: 36
  },
  header: {
    height: 40
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

function setLocale(e, t) {
  RealGrid.setLocale(gridLocale[e.target.innerText]);
  gridView.refresh();
}

function clearRows() {
  dataProvider.clearRows();
}