import { Button, Card, Flex, Typography } from "antd";
import { MyContainer } from "../../../shared/components/MyContainer";
import { CheckOutlined } from "@ant-design/icons";
import HeaderBar from "../../../core/components/Header";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { Constants } from "../../../core/utils/utils";
import React from "react";
import MySpin from "shared/components/MySpin";
import MyErrorResult from "shared/components/MyResult";
import MyEmpty from "shared/components/MyEmpty";
import { useGetLessonContentsQuery } from "core/services/lessons";

export type LessonContent = {
  id: string;
  position: number;
  type: number;
  data: string;
};

/*
const LessonContents = [
  {
    id: "0",
    position: 1,
    type: 0,
    data: "How to clean the coffee machine",
  },
  {
    id: "1",
    position: 1,
    type: 2,
    data: img,
  },
  {
    id: "2",
    position: 2,
    type: 1,
    data: "The proper cleaning of the coffee machine",
  },
  {
    id: "3",
    position: 3,
    type: 1,
    data: "Think a moment in silence. What makes you really happy? Are you the only one with this? Probably you could sell this knowledge to others! Think about it",
  },
] as LessonContent[]; */

export function Converter({
  mode,
  lessonContent,
  onEdit,
}: {
  mode: "view" | "edititable";
  lessonContent: LessonContent;
  onEdit?: (newData: string) => void;
}) {
  // const dispatch = useDispatch();
  // const contents = useSelector(lessonContents);

  switch (lessonContent.type) {
    case 0:
      return mode === "view" ? (
        <div style={{ fontWeight: "bold", fontSize: 24 }}>
          {lessonContent.data}
        </div>
      ) : (
        <Typography.Title
          editable={{
            triggerType: "text" as any,
            onChange: (event) => onEdit?.(event),
          }}
          level={1}
          style={{
            margin: 0,
            width: "100%",
          }}
        >
          {lessonContent.data}
        </Typography.Title>
      );
    case 1:
      return mode === "view" ? (
        <div style={{ fontSize: 16 }}>{lessonContent.data}</div>
      ) : (
        <Typography.Text
          editable={{
            triggerType: "text" as any,
            onChange: (event) => onEdit?.(event),
          }}
          style={{
            margin: 0,
            width: "100%",
          }}
        >
          {lessonContent.data}
        </Typography.Text>
      );
    case 2:
      return (
        <img src={lessonContent.data} alt="img" style={{ width: "100%" }} />
      );
    case 3:
      return (
        <div style={{ fontWeight: "700", fontSize: 20 }}>
          {lessonContent.data}
        </div>
      );
    case 4:
      return <div style={{ fontSize: 14 }}>{lessonContent.data}</div>;
    default:
      return <div>Unknown type</div>;
  }
}

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

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

  if (isLoading) return <MySpin />;
  if (error) return <MyErrorResult />;

  if (!data || data.length === 0) return <MyEmpty />;

  return (
    <>
      {data.map((lessonContent) => (
        <div key={lessonContent.id} style={{ paddingBottom: 6 }}>
          <Converter mode="view" lessonContent={lessonContent} />
        </div>
      ))}
    </>
  );
};

export default function LessonPage() {
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <>
      <HeaderBar
        theme="light"
        backTo={Constants.ROUTE_PATHS.LESSIONS.ROOT}
        onEdit={() => navigate(`${location.pathname}/editor`)}
      />

      <MyContainer>
        <Flex justify="center">
          <Card
            style={{
              width: 800,
              maxWidth: 800,
            }}
          >
            <LessonContents />

            <Flex justify="right">
              <Button type="primary" icon={<CheckOutlined />}>
                Finish lesson
              </Button>
            </Flex>
          </Card>
        </Flex>
      </MyContainer>
    </>
  );
}