import { useNavigate, useParams } from "react-router-dom";
import {
  lessonContents,
  lessonThumbnail,
  setEditorActive,
} from "./lessonPageEditorSlice";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { LessonContent } from "../LessonPage";
import { Card, Flex } from "antd";
import { Constants } from "../../../core/utils/utils";
import HeaderBar from "../../../core/components/Header";
import Droppable from "./Droppable";
import LessonPreviewCard from "../../../shared/components/MyLessonPreviewCard";
import {
  useGetLessonPreviewQuery,
  useUpdateLessonPreviewTitleMutation,
} from "core/services/lessons";
import MyErrorResult from "shared/components/MyResult";
import styles from "./styles.module.css";

const PreviewCard: React.FC = () => {
  const { lessonId } = useParams();

  const { data, error, isLoading, refetch } = useGetLessonPreviewQuery(
    lessonId as string,
    {
      refetchOnMountOrArgChange: true,
    }
  );

  const [updateLessonPreviewTitle, {}] = useUpdateLessonPreviewTitleMutation();

  if (error) return <MyErrorResult />;

  return (
    <LessonPreviewCard
      mode="editable"
      lessonId={lessonId as string}
      loading={isLoading}
      lessonPreview={{
        Title: data?.Title || "",
        ThumbnailUrl: data?.ThumbnailUrl || "",
      }}
      onEditTitle={async (newTitle) => {
        try {
          const res = await updateLessonPreviewTitle({
            lessonId: lessonId as string,
            newTitle: newTitle,
          }).unwrap();

          if (res) {
            refetch();
          }
        } catch (err) {
          console.error(err);
        }
      }}
      onThumbnailChanged={refetch}
    />
  );
};

export default function LessonPageEditor() {
  const { lessonId } = useParams();
  const navigate = useNavigate();

  const dispatch = useDispatch();
  const lnContents = useSelector(lessonContents);
  const lnThumbnail = useSelector(lessonThumbnail);

  useEffect(() => {
    dispatch(setEditorActive(true));

    return () => {
      dispatch(setEditorActive(false));
    };
  }, []);

  return (
    <>
      <HeaderBar
        theme="light"
        backTo={Constants.ROUTE_PATHS.LESSIONS.PAGE.replace(
          ":lessonId",
          lessonId as string
        )}
        onView={() =>
          navigate(
            Constants.ROUTE_PATHS.LESSIONS.PAGE.replace(
              ":lessonId",
              lessonId as string
            )
          )
        }
      />

      <Flex justify="center" style={{ paddingTop: 24 }}>
        <Flex
          justify="center"
          vertical
          gap={16}
          className={styles.cardContainer}
        >
          <PreviewCard />

          <Card>
            <Flex vertical gap={16}>
              <Droppable items={lnContents} />
            </Flex>
          </Card>
        </Flex>
      </Flex>
    </>
  );
}

export function StandardEditorCompontent(type: number): LessonContent {
  return {
    id: Math.floor(Math.random() * 10000).toString(),
    position: 1,
    type: type,
    data: "Some data",
  };
}