var reportingOfSelectedData = {
  "advantage-26mar2023": [533, 80, 49, 26],
  "advantage-02apr2023": [254, 38, 23, 12],
  "advantage-09apr2023": [506, 76, 47, 25],
  "alpine-26mar2023": [43, 8, 18, 16],
  "alpine-02apr2023": [26, 5, 11, 10],
  "alpine-09apr2023": [50, 10, 21, 19],
  "hallmark-26mar2023": [35, 5, 3, 2],
  "hallmark-02apr2023": [64, 9, 6, 4],
  "hallmark-09apr2023": [69, 10, 6, 5],
  "hci-26mar2023": [33, 4, 1, 1],
  "hci-02apr2023": [45, 5, 1, 1],
  "hci-09apr2023": [66, 7, 2, 1],
  "hcitx-26mar2023": [22, 3, 0, 0],
  "hcitx-02apr2023": [43, 5, 0, 0],
  "hcitx-09apr2023": [40, 5, 0, 0],
  "tsc-26mar2023": [77, 7, 6, 3],
  "tsc-02apr2023": [13, 1, 1, 0],
  "tsc-09apr2023": [21, 2, 2, 1],
};
var tenant = [
  "alltenants",
  "advantage",
  "alpine",
  "hallmark",
  "hci",
  "hcitx",
  "tsc",
];
var tenureMap = {
  "26mar2023": "26 Mar 2023",
  "02apr2023": "02 Apr 2023",
  "09apr2023": "09 Apr 2023",
};
var tenure = ["26mar2023", "02apr2023", "09apr2023"];
var selectedTenant = [];
var selectedTenure = ["26mar2023", "02apr2023", "09apr2023"];
var lineData = {
  success: [743, 445, 752],
  processed: [107, 63, 110],
  failed: [77, 42, 78],
  needsAttention: [48, 27, 51],
  tenure: ["26 Mar 2023", "02 Apr 2023", "09 Apr 2023"],
};
var total = {
  success: 0,
  processed: 0,
  failed: 0,
  needsAttention: 0,
};
var lineChartDraw;
var lineChartCtx;
var lineChart;
function rDashboardTrend(rdata) {
  lineChartCtx = document.getElementById("rTrend");
  lineChartDraw = {
    labels: ["", ...rdata.tenure, ""],
    datasets: [
      {
        label: "Success",
        data: [, ...rdata.success],
        lineTension: 0,
        fill: false,
        borderColor: "#9cf0a4",
        backgroundColor: "#9cf0a4",
        pointBorderWidth: 0,
        lineTension: 0.4,
        radius: 2,
      },
      {
        label: "Processed",
        data: [, ...rdata.processed],
        lineTension: 0,
        fill: false,
        borderColor: "#52b2bf",
        backgroundColor: "#52b2bf",
        pointBorderWidth: 0,
        lineTension: 0.4,
        radius: 2,
      },
      {
        label: "Failed",
        data: [, ...rdata.failed],
        lineTension: 0,
        fill: false,
        borderColor: "#faa19d",
        backgroundColor: "#faa19d",
        pointBorderWidth: 0,
        lineTension: 0.4,
        radius: 2,
      },
      {
        label: "Needs Attention",
        data: [, ...rdata.needsAttention],
        lineTension: 0,
        fill: false,
        borderColor: "#fce1a2",
        backgroundColor: "#fce1a2",
        pointBorderWidth: 0,
        lineTension: 0.4,
        radius: 2,
      },
    ],
  };

  var chartOptions = {
    legend: {
      display: true,
      position: "bottom",
      labels: {
        boxWidth: 10,
      },
    },
    scales: {
      xAxes: [
        {
          gridLines: {
            display: false,
          },
          scaleLabel: {
            display: false,
          },
        },
      ],
      yAxes: [
        {
          gridLines: {
            color: "#ECF0F4",
            borderDash: [7, 5],
          },

          max: 1800,
          min: 0,
          ticks: {
            stepSize: 250,
          },
        },
      ],
    },
    interaction: {
      intersect: false,
      mode: "index",
    },
    plugins: [
      {
        title: {
          display: true,
          text: (ctx) => {
            const {
              axis = "xy",
              intersect,
              mode,
            } = ctx.chart.options.interaction;
            return (
              "Mode: " + mode + ", axis: " + axis + ", intersect: " + intersect
            );
          },
        },
      },
    ],
  };

  lineChart = new Chart(lineChartCtx, {
    type: "line",
    data: lineChartDraw,
    options: chartOptions,
  });
}
rDashboardTrend(lineData);
$(".apply-filter-r-dashboard").click(() => {
  lineData = {
    success: [],
    processed: [],
    failed: [],
    needsAttention: [],
    tenure: [],
  };
  total = {
    success: 0,
    processed: 0,
    failed: 0,
    needsAttention: 0,
    total: 0,
  };
  let i = 0;
  selectTenure;
  tenure.forEach((selDate) => {
    if (selectedTenure.includes(selDate)) {
      selectedTenant.forEach((ten) => {
        if (ten !== "alltenants") {
          let succ = reportingOfSelectedData[`${ten}-${selDate}`][0];
          let processed = reportingOfSelectedData[`${ten}-${selDate}`][1];
          let failed = reportingOfSelectedData[`${ten}-${selDate}`][2];
          let needsAttention = reportingOfSelectedData[`${ten}-${selDate}`][3];
          lineData.success[i] = (lineData.success[i] || 0) + succ;
          lineData.processed[i] = (lineData.processed[i] || 0) + processed;
          lineData.failed[i] = (lineData.failed[i] || 0) + failed;
          lineData.needsAttention[i] =
            (lineData.needsAttention[i] || 0) + needsAttention;
          total.success = total.success + succ;
          total.processed = total.processed + processed;
          total.needsAttention = total.needsAttention + needsAttention;
          total.failed = total.failed + failed;
          total.total =
            total.total + succ + processed + needsAttention + failed;
        }
      });
      lineData.tenure.push(tenureMap[selDate]);
      i += 1;
    }
  });
  console.log(lineData.tenure);
  setTimeout(() => {
    lineChart.data.datasets[0].data = [, ...lineData.success];
    lineChart.data.datasets[1].data = [, ...lineData.processed];
    lineChart.data.datasets[2].data = [, ...lineData.failed];
    lineChart.data.datasets[3].data = [, ...lineData.needsAttention];
    lineChart.data.labels = ["", ...lineData.tenure, ""];
    lineChart.update();
  }, 0);
  $(".total-records").text(total.total);
  $(".r-success").text(total.success);
  $(".r-rbs-success").text(total.success);
  $(".r-processed").text(total.processed);
  $(".r-rbs-processed").text(total.processed);
  $(".r-failed").text(total.failed);
  $(".r-needs-attention").text(total.needsAttention);
});
function selectTenants(j) {
  if (j === "alltenants" && selectedTenant[0] !== "alltenants") {
    selectedTenant = [
      "alltenants",
      "advantage",
      "alpine",
      "hallmark",
      "hci",
      "hcitx",
      "tsc",
    ];
  } else if (j === "alltenants" && selectedTenant[0] === "alltenants") {
    selectedTenant = [];
  } else if (selectedTenant.includes(j)) {
    selectedTenant = selectedTenant.filter(
      (a) => a !== j && a !== "alltenants"
    );
  } else {
    selectedTenant = [...selectedTenant, j];
    if (selectedTenant.length === tenant.length - 1) {
      selectedTenant.push("alltenants");
    }
  }
  tenant.forEach((selD) => {
    $(`.${selD}-false`).show();
    $(`.${selD}-true`).hide();
  });
  selectedTenant.forEach((selD) => {
    $(`.${selD}-false`).hide();
    $(`.${selD}-true`).show();
  });
  var selectedText = "";
  if (selectedTenant.length === 7) {
    selectedText = "All Tenants";
  } else if (selectedTenant.length === 1) {
    selectedText = "1 Tenant";
  } else {
    selectedText = selectedTenant.length + " Tenants";
  }
  $(".tenant-text").text(selectedText);
}
selectTenants("alltenants");
$(".tenant-list-dropdown-item-container").click((e) => {
  let j = e.currentTarget.innerText.replace(" ", "").toLowerCase();
  selectTenants(j);
});
function selectTenure(j) {
  if (selectedTenure.includes(j)) {
    selectedTenure = selectedTenure.filter((a) => a !== j);
  } else {
    selectedTenure = [...selectedTenure, j];
  }
  tenure.forEach((selD) => {
    $(`._${selD}-false`).show();
    $(`._${selD}-true`).hide();
  });
  selectedTenure.forEach((selD) => {
    $(`._${selD}-false`).hide();
    $(`._${selD}-true`).show();
  });
  var selectedText = "";
  if (selectedTenure.length === 1) {
    selectedText = "1 Week";
  } else {
    selectedText = selectedTenure.length + " Weeks";
  }
  $(".week-selection").text(selectedText);
}
tenure.forEach((selD) => {
  $(`._${selD}-false`).hide();
  $(`._${selD}-true`).show();
});
$(".week-list-dropdown-item-container").click((e) => {
  let j = e.currentTarget.innerText
    .split(" ")
    .join("")
    .toLowerCase()
    .slice(3, 12);
  selectTenure(j);
});