// icons
import { Contrast, LayoutGrid, Users } from "lucide-react";
// helpers
import { renderEmoji } from "helpers/emoji.helper";
import { truncateText } from "helpers/string.helper";
// types
import { IProject } from "types";

type Props = {
  projects: IProject[];
};

export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = (props) => {
  const { projects } = props;

  return (
    <div className="hidden h-full overflow-hidden md:flex md:flex-col">
      <h4 className="font-medium">Selected Projects</h4>
      <div className="mt-4 h-full space-y-6 overflow-y-auto">
        {projects.map((project) => (
          <div key={project.id} className="w-full">
            <div className="flex items-center gap-1 text-sm">
              {project.emoji ? (
                <span className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(project.emoji)}</span>
              ) : project.icon_prop ? (
                <div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(project.icon_prop)}</div>
              ) : (
                <span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
                  {project?.name.charAt(0)}
                </span>
              )}
              <h5 className="flex items-center gap-1">
                <p className="break-words">{truncateText(project.name, 20)}</p>
                <span className="ml-1 text-xs text-custom-text-200">({project.identifier})</span>
              </h5>
            </div>
            <div className="mt-4 w-full space-y-3 pl-2">
              <div className="flex items-center justify-between gap-2 text-xs">
                <div className="flex items-center gap-2">
                  <Users className="text-custom-text-200" size={14} strokeWidth={2} />
                  <h6>Total members</h6>
                </div>
                <span className="text-custom-text-200">{project.total_members}</span>
              </div>
              <div className="flex items-center justify-between gap-2 text-xs">
                <div className="flex items-center gap-2">
                  <Contrast className="text-custom-text-200" size={14} strokeWidth={2} />
                  <h6>Total cycles</h6>
                </div>
                <span className="text-custom-text-200">{project.total_cycles}</span>
              </div>
              <div className="flex items-center justify-between gap-2 text-xs">
                <div className="flex items-center gap-2">
                  <LayoutGrid className="text-custom-text-200" size={14} strokeWidth={2} />
                  <h6>Total modules</h6>
                </div>
                <span className="text-custom-text-200">{project.total_modules}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};