persian-ping-frontend/src/pages/tutorial/section/components/Leran.tsx

import { LearnProps } from "../../../../types/props";
import { useQuery } from "@tanstack/react-query";
import useAxios from "../../../../hooks/useAxios";
import Alert from "../../../../components/alert/Alert";
import { MdErrorOutline } from "react-icons/md";
import Button from "../../../../components/button";
import { saveAs } from "file-saver";
import { Fragment } from "react/jsx-runtime";

const getMediaType = (url: string) => {
  const extension = url.split(".").pop()?.toLowerCase();
  if (extension) {
    if (["jpg", "jpeg", "png", "gif"].includes(extension)) {
      return "image";
    }
    if (["mp4", "webm", "ogg"].includes(extension)) {
      return "video";
    }
  }
  return "unknown";
};

const Learn = ({ activeTutorial }: LearnProps) => {
  const axios = useAxios();
  const { data, isLoading, isFetching, error } = useQuery({
    queryKey: ["learn", activeTutorial],
    queryFn: () => {
      return axios.get(`/home/category/learning/${activeTutorial}`);
    },
  });
  return (
    <div className="w-full h-full border-4 flex flex-col justify-center items-center border-solid mt-4 p-4 rounded-md border-gray-800 border-spacing-1">
      {isLoading || isFetching ? (
        <div className="w-full h-full p-5 flex justify-center items-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width={100}
            viewBox="0 0 300 150"
          >
            <path
              fill="none"
              className="stroke-gray-600"
              strokeWidth="15" // تغییر به camelCase
              strokeLinecap="round" // تغییر به camelCase
              strokeDasharray="300 385" // تغییر به camelCase
              strokeDashoffset="0" // تغییر به camelCase
              d="M275 75c0 31-27 50-50 50-58 0-92-100-150-100-28 0-50 22-50 50s23 50 50 50c58 0 92-100 150-100 24 0 50 19 50 50Z"
            >
              <animate
                attributeName="stroke-dashoffset"
                calcMode="spline"
                dur="2s" // برای مدت زمان، به 's' برای ثانیه نیاز داریم
                values="685;-685"
                keySplines="0 0 1 1"
                repeatCount="indefinite"
              ></animate>
            </path>
          </svg>
        </div>
      ) : error ? (
        <Alert type="danger" message="خطایی با این موضوع رخ داد: ">
          {error.message}
        </Alert>
      ) : data?.data?.result?.learning.length === 0 &&
        !data?.data?.result?.files ? (
        <div className="w-full h-full flex flex-col gap-3 justify-center items-center">
          <MdErrorOutline className="w-[5rem] h-[5rem]" />
          <p className="text-sm md:text-base"> اموزشی وجود ندارد </p>
        </div>
      ) : (
        <>
          {/* Render files if they exist */}
          {data?.data?.result?.files &&
            data?.data?.result?.files.length > 0 && (
              <div className="w-full h-full p-3 mb-3 flex flex-col justify-center items-center gap-2 bg-gray-900 rounded-md shadow-xl">
                {data.data.result.files.map(
                  (file: {
                    id: number;
                    title: string;
                    file: string;
                    description: string;
                  }) => (
                    <Fragment key={file.id}>
                      {file?.description ? (
                        <div className="w-full h-full flex flex-col gap-1 justify-center items-center p-3 border-2 border-secondTheme rounded-md">
                          <div className="w-full h-full flex justify-between gap-4 items-center">
                            <p className="text-xs md:text-sm">{file.title}</p>
                            <Button
                              extra="!py-1"
                              onClick={() => saveAs(file.file)}
                            >
                              دانلود
                            </Button>
                          </div>
                          <p className="w-full h-full text-xs md:text-sm text-gray-300"> <span className="w-auto h-auto px-1 bg-secondTheme text-gray-800 rounded-md">توضیحات</span> : {file?.description}</p>
                        </div>
                      ) : (
                        <div className="w-full h-full flex justify-between gap-4 items-center">
                          <p className="text-xs md:text-sm">{file.title}</p>
                          <Button
                            extra="!py-1"
                            onClick={() => saveAs(file.file)}
                          >
                            دانلود
                          </Button>
                        </div>
                      )}
                    </Fragment>
                  )
                )}
              </div>
            )}

          {/* Render learning items */}
          {data?.data?.result?.learning.map(
            (i: {
              id: string;
              title: string;
              medias: string[];
              url_file: string;
            }) => (
              <div
                key={i.id}
                className="relative w-full h-full flex flex-col justify-center items-center"
              >
                <span className="p-2 bg-gray-800 rounded-md mb-4">
                  {i.title}
                </span>
                <div className="relative w-full h-full flex flex-col justify-center items-center">
                  {i.medias.map((media, index) => {
                    const mediaType = getMediaType(media);
                    return (
                      <div
                        key={index}
                        className="w-full md:w-1/2 mb-3 rounded-lg mx-auto h-full"
                      >
                        {mediaType === "image" ? (
                          <img
                            src={media}
                            alt="media"
                            className="w-full h-full object-cover rounded-lg"
                          />
                        ) : mediaType === "video" ? (
                          <video
                            src={media}
                            controls
                            className="w-full h-full object-cover rounded-lg"
                          />
                        ) : (
                          <p>نوع فایل ناشناخته است</p>
                        )}
                      </div>
                    );
                  })}
                </div>
                {i.url_file && (
                  <>
                    <Button extra="!mb-4" onClick={() => saveAs(i.url_file)}>
                      دانلود برنامه
                    </Button>
                  </>
                )}
                <hr className="border-2 w-full rounded-md my-5 border-gray-800" />
              </div>
            )
          )}
        </>
      )}
    </div>
  );
};

export default Learn;