import { CommentOutlined } from "@ant-design/icons";
import { Card, Flex, Input } from "antd";
import { Constants, getImageUrl } from "core/utils/utils";
import { Link } from "react-router-dom";
import MyUpload from "shared/components/MyUpload";
import styles from "./styles.module.css";
import { LessonSettings } from "core/types/lesson";
import { useTranslation } from "react-i18next";

export default function MyLessonPreviewCard({
  mode = "view",
  lessonId,
  loading = false,
  lessonSettings,
  onEditTitle,
  onThumbnailChanged,
}: {
  mode: "view" | "editable";
  lessonId: string;
  loading?: boolean;
  lessonSettings: LessonSettings;
  onEditTitle?: (newTitle: string) => void;
  onThumbnailChanged?: () => void;
}) {
  const { t } = useTranslation();

  const LinkWrapper = ({ children }: { children: React.ReactNode }) => {
    if (mode === "editable") return <>{children}</>;

    return (
      <Link
        to={Constants.ROUTE_PATHS.LESSIONS.PAGE.replace(":lessonId", lessonId)}
      >
        {children}
      </Link>
    );
  };

  const UploadWrapper = ({ children }: { children: React.ReactNode }) => {
    if (mode === "view") return <>{children}</>;

    return (
      <MyUpload
        action={`/lessons/${lessonId}/preview/thumbnail`}
        onChange={(info) => {
          if (info.file.status === "done") {
            onThumbnailChanged?.();
          }
        }}
        imgCropProps={{
          aspect: 5 / 4,
          children: <></>,
        }}
      >
        {children}
      </MyUpload>
    );
  };

  return (
    <LinkWrapper>
      <Card loading={loading}>
        <div className={styles.card}>
          <UploadWrapper>
            <img
              src={
                lessonSettings.ThumbnailUrl === ""
                  ? `${Constants.STATIC_CONTENT_ADDRESS}/demo/lesson_thumbnail.webp`
                  : getImageUrl(lessonSettings.ThumbnailUrl)
              }
              alt="lesson thumbnail"
              className={styles.img}
            />
          </UploadWrapper>

          <Flex vertical justify="center" style={{ width: "100%" }}>
            {mode === "view" ? (
              <div>
                <div className={styles.title}>{lessonSettings.Title}</div>
                <CommentOutlined /> {lessonSettings.QuestionsCount}{" "}
                {t("lessonPage.questions")}
              </div>
            ) : (
              <Input
                variant="outlined"
                defaultValue={lessonSettings.Title}
                onChange={(event) => onEditTitle?.(event.target.value)}
                placeholder={t("lessonPageEditor.titlePlaceholder")}
                style={{ width: "100%", fontSize: 24, fontWeight: "bold" }}
              />
            )}
          </Flex>
        </div>
      </Card>
    </LinkWrapper>
  );
}

/*
  <Typography.Title
                level={2}
                editable={{
                  triggerType: "text" as any,
                  tooltip: "click to edit text",
                  onChange: (event) => onEditTitle?.(event),
                }}
                style={{
                  width: "100%",
                  margin: 0,
                }}
              >
                {lessonSettings.Title}
              </Typography.Title>
*/