import React from "react";
import useUsers from "@/hooks/useUsers";
import useGroups from "@/hooks/useGroups";
import { User } from "@/interfaces/user";
import Select from "@/components/Low/Select";
import ProgressBar from "@/components/Low/ProgressBar";
import {
  BsBook,
  BsClipboard,
  BsHeadphones,
  BsMegaphone,
  BsPen,
} from "react-icons/bs";
import { MODULE_ARRAY } from "@/utils/moduleUtils";
import { capitalize } from "lodash";
import { getLevelLabel } from "@/utils/score";

const Card = ({ user }: { user: User }) => {
  return (
    <div className="border-mti-gray-platinum flex flex-col h-fit w-full cursor-pointer flex-col gap-6 rounded-xl border bg-white p-4 transition duration-300 ease-in-out hover:drop-shadow">
      <div className="flex flex-col gap-3">
        <h3 className="text-xl font-semibold">{user.name}</h3>
      </div>
      <div className="flex w-full gap-3 flex-wrap">
        {MODULE_ARRAY.map((module) => {
          const desiredLevel = user.desiredLevels[module] || 9;
          const level = user.levels[module] || 0;
          return (
            <div
              className="border-mti-gray-anti-flash flex flex-col gap-2 rounded-xl border p-4 min-w-[250px]"
              key={module}
            >
              <div className="flex items-center gap-2 md:gap-3">
                <div className="bg-mti-gray-smoke flex h-8 w-8 items-center justify-center rounded-lg md:h-12 md:w-12 md:rounded-xl">
                  {module === "reading" && (
                    <BsBook className="text-ielts-reading h-4 w-4 md:h-5 md:w-5" />
                  )}
                  {module === "listening" && (
                    <BsHeadphones className="text-ielts-listening h-4 w-4 md:h-5 md:w-5" />
                  )}
                  {module === "writing" && (
                    <BsPen className="text-ielts-writing h-4 w-4 md:h-5 md:w-5" />
                  )}
                  {module === "speaking" && (
                    <BsMegaphone className="text-ielts-speaking h-4 w-4 md:h-5 md:w-5" />
                  )}
                  {module === "level" && (
                    <BsClipboard className="text-ielts-level h-4 w-4 md:h-5 md:w-5" />
                  )}
                </div>
                <div className="flex w-full flex-col">
                  <span className="text-sm font-bold md:font-extrabold w-full">
                    {capitalize(module)}
                  </span>
                  <div className="text-mti-gray-dim text-sm font-normal">
                    {module === "level" && (
                      <span>
                        English Level: {getLevelLabel(level).join(" / ")}
                      </span>
                    )}
                    {module !== "level" && (
                      <div className="flex flex-col">
                        <span>Level {level} / Level 9</span>
                        <span>Desired Level: {desiredLevel}</span>
                      </div>
                    )}
                  </div>
                </div>
              </div>
              <div className="md:pl-14">
                <ProgressBar
                  color={module}
                  label=""
                  mark={Math.round((desiredLevel * 100) / 9)}
                  markLabel={`Desired Level: ${desiredLevel}`}
                  percentage={Math.round((level * 100) / 9)}
                  className="h-2 w-full"
                />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const CorporateStudentsLevels = () => {
  const { users } = useUsers();
  const { groups } = useGroups();

  const corporateUsers = users.filter((u) => u.type === "corporate") as User[];
  const [corporateId, setCorporateId] = React.useState<string>("");
  const corporate =
    corporateUsers.find((u) => u.id === corporateId) || corporateUsers[0];

  const groupsFromCorporate = corporate
    ? groups.filter((g) => g.admin === corporate.id)
    : [];

  const groupsParticipants = groupsFromCorporate
    .flatMap((g) => g.participants)
    .reduce((accm: User[], p) => {
      const user = users.find((u) => u.id === p) as User;
      if (user) {
        return [...accm, user];
      }
      return accm;
    }, []);

  return (
    <>
      <Select
        options={corporateUsers.map((x: User) => ({
          value: x.id,
          label: `${x.name} - ${x.email}`,
        }))}
        value={corporate ? { value: corporate.id, label: corporate.name } : null}
        onChange={(value) => setCorporateId(value?.value!)}
        styles={{
          menuPortal: (base) => ({ ...base, zIndex: 9999 }),
          option: (styles, state) => ({
            ...styles,
            backgroundColor: state.isFocused
              ? "#D5D9F0"
              : state.isSelected
              ? "#7872BF"
              : "white",
            color: state.isFocused ? "black" : styles.color,
          }),
        }}
      />
      {groupsParticipants.map((u) => (
        <Card user={u} key={u.id} />
      ))}
    </>
  );
};

export default CorporateStudentsLevels;