import { Button, Card, Flex, Typography } from "antd";

import img from "./pexels-photo-302902.webp";
import { MyContainer } from "../../../shared/components/MyContainer";
import { CheckOutlined } from "@ant-design/icons";
import HeaderBar from "../../../core/components/Header";
import { useLocation, useNavigate } from "react-router-dom";
import { Constants } from "../../../core/utils/utils";

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>;
  }
}

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.map((lessonContent) => (
              <div key={lessonContent.id} style={{ paddingBottom: 6 }}>
                <Converter mode="view" lessonContent={lessonContent} />
              </div>
            ))}

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