import React from "react";
import { View, Text, StyleSheet } from "@react-pdf/renderer";
import { ModuleScore } from "@/interfaces/module.scores";
import { styles } from "../styles";
import { RadialResult } from "./radial.result";
interface Props {
  detail: ModuleScore;
  title: string;
}

const thresholds = [
  {
    level: "Low A1",
    label: "Begginner",
    minValue: 0,
    maxValue: 3,
  },
  {
    level: "High A1/Low A2",
    label: "Elementary",
    minValue: 4,
    maxValue: 7,
  },
  {
    level: "High A2/Low B1",
    label: "Pre-Intermediate",
    minValue: 8,
    maxValue: 12,
  },
  {
    level: "High B2/Low C1",
    label: "Upper-Intermediate",
    minValue: 16,
    maxValue: 21,
  },
  {
    level: "C1",
    label: "Advanced",
    minValue: 22,
    maxValue: 25,
  },
];

const customStyles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "row",
    gap: 30,
    justifyContent: "space-between",
  },
  tableContainer: {
    display: "flex",
    flex: 1,
    flexDirection: "column",
  },
  tableLabel: {
    display: "flex",
    alignItems: "center",
  },
  tableBody: { display: "flex", flex: 1, flexDirection: "row" },
  tableRow: {
    display: "flex",
    flexDirection: "column",
  },
});

export const LevelExamDetails = ({ detail, title }: Props) => {
  const updatedThresholds = thresholds.map((t) => ({
    ...t,
    match: detail.score >= t.minValue && detail.score <= t.maxValue,
  }));

  const getBackgroundColor = (match: boolean, base: boolean) => {
    if (match) return "#c2bfdd";
    return base ? "#553b25" : "#ea7c7b";
  };

  const getTextColor = (match: boolean, base: boolean) => {
    if (match) return "#9e7936";
    return base ? "white" : "#553b25";
  };
  return (
    <View style={[styles.textFont, customStyles.container]}>
      <RadialResult {...detail} />
      <View style={customStyles.tableContainer}>
        <View style={customStyles.tableLabel}>
          <Text
            style={[styles.textBold, styles.textColor, { fontSize: "10px" }]}
          >
            {title}
          </Text>
        </View>
        <View style={customStyles.tableBody}>
          {updatedThresholds.map(
            ({ level, label, minValue, maxValue, match }, index, arr) => (
              <View
                key={label}
                style={[
                  customStyles.tableRow,
                  {
                    width: `calc(100% / ${arr.length})`,
                  },
                ]}
              >
                <View
                  style={{
                    backgroundColor: getBackgroundColor(match, true),
                    paddingVertical: "8px",
                    alignItems: "center",
                  }}
                >
                  <Text
                    style={[
                      styles.textBold,
                      {
                        color: getTextColor(match, true),
                        fontSize: "6px",
                      },
                    ]}
                  >
                    {level}
                  </Text>
                </View>
                <View
                  style={{
                    backgroundColor: getBackgroundColor(match, false),
                    paddingVertical: "8px",
                    alignItems: "center",
                  }}
                >
                  <Text
                    style={[
                      styles.textBold,
                      {
                        color: getTextColor(match, false),
                        fontSize: "6px",
                      },
                    ]}
                  >
                    {label}
                  </Text>
                </View>
                <View
                  style={{
                    backgroundColor: getBackgroundColor(match, true),
                    paddingVertical: "24px",
                    alignItems: "center",
                  }}
                >
                  <Text
                    style={[
                      styles.textBold,
                      {
                        color: getTextColor(match, true),
                        fontSize: "10px",
                      },
                    ]}
                  >
                    {minValue}-{maxValue}
                  </Text>
                </View>
              </View>
            )
          )}
        </View>
      </View>
    </View>
  );
};