import React, {useState} from "react";
import {Button, Flex, Image, Spinner, Stack, Text,} from "@chakra-ui/react";
import {BabuActivityCard} from "./CustomComponents";
import {gql, useQuery} from "@apollo/client";
import "../../index.css";
import BlogDetail from "@ericnjeru/aime-blog";
import CustomPodcast from "./podcast/CustomPodcast";
// import { ActivityScreens } from "../Custom/story/ActivityScreens";
import CustomVideoPlayer from "./video/CustomVideoPlayer";

let babyPlaying2 =
    "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/baby2.jpg?alt=media&token=aedbb6c8-a034-481b-ae73-f9b14127bba8";
let topIcon =
    "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/topIcon.svg?alt=media&token=b96bbdd4-f6bd-42fa-bc71-c9064e486afd";
export const GET_PRODCAST = gql`
  query MyQuery {
    babbu_podcast {
      category
      id
      poster_image
      publish_date
      title
      audio
    }
  }
`;
export const GET_BLOG = gql`
  query MyQuery {
    posts {
      id
      title
      body
      author
      date
      category
      overview
      category_id
    }
  }
`;
export const GET_VIDEO = gql`
  query MyQuery {
    babbu_video {
      category
      content
      id
      poster_image
      publish_date
      title
      video
    }
  }
`;

export const GET_ACTIVITY = gql`
  query MyQuery {
    babbu_activities_library {
      new_activity_id
      activity_name
      activity_screen_1_cta_image_video
      activity_screen_1_image_video
      age_group_id
    }
  }
`;
const BabuAllActivity = (props: any) => {
    const [activityId, setActivityId] = useState(-1);
    const {onNextFunction, signOut} = props;

    const prodcastData = useQuery(GET_PRODCAST);
    const activityData = useQuery(GET_ACTIVITY);
    const videoData = useQuery(GET_VIDEO);
    const blogData = useQuery(GET_BLOG);


    const [selected, setSelected] = useState("");
    const [selectedRecord, setSelectedRecord] = useState({
        id: -1,
        title: "",
        poster_image: "",
        audio: "",
        content: "",
        video: "",
    });

    function onBlog(blog: any) {
        console.log(blog);
        setSelected("blog");
        setSelectedRecord(blog);
    }

    function onPodcast(podcast: any) {
        console.log(podcast);
        setSelected("podcast");
        setSelectedRecord(podcast);
    }

    function onVideo(video: any) {
        console.log(video);
        setSelected("video");
        setSelectedRecord(video);
    }

    function onReview() {
        // navigate("/review");
        onNextFunction();
    }

    if (selected === "blog") {
        let blogId = selectedRecord.id;
        let blogTable = "posts";

        return (
            <Stack>
                <BlogDetail
                    postId={blogId}
                    tableName={blogTable}
                    navCallBack={() => {
                        setSelected("");
                    }}
                />
                <br/>
                <Flex align="center" justify="center" pb="10px">
                    <Stack>
                        <Button
                            fontSize={"20px"}
                            borderRadius={"12px"}
                            padding={"20px"}
                            // width={"327px"}
                            width={"345px"}
                            height={"56px"}
                            onClick={onReview}
                            fontWeight={"500"}
                            color={"white"}
                            bg={"#43C6A1"}
                        >
                            Review content
                        </Button>
                    </Stack>
                </Flex>
            </Stack>
        );
    }

    if (selected === "video") {
        let video_heading = "Stories with Jane";
        let video_title = selectedRecord.title;
        // "The Hungry, Hungry Catepillar";
        let video_description = selectedRecord.content;
        // `Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.`;
        let video_url = selectedRecord.video;
        // `https://firebasestorage.googleapis.com/v0/b/auth-babbu.appspot.com/o/30%20Second%20Timer%20with%20Music%20for%20Kids!%20Countdown%20Video%20HD!.mp4_1634924879429?alt=media&token=c2f23541-c75b-4a09-aa01-e29275fcabe1`;
        return (
            <CustomVideoPlayer
                heading={video_heading}
                title={video_title}
                description={video_description}
                url={video_url}
                onClose={() => setSelected("")}
                onReview={() => {
                    // navigate("/review");
                    onNextFunction();
                }}
            />
        );
    }

    if (selected === "podcast") {
        let audio_heading = "Review Content";
        let audio_title = "Podcast";

        let audio_description = selectedRecord.title;
        let audio_posterImage = selectedRecord.poster_image;
        // let audio_url = `https://firebasestorage.googleapis.com/v0/b/auth-babbu.appspot.com/o/30%20Second%20Timer%20with%20Music%20for%20Kids!%20Countdown%20Video%20HD!.mp4_1634924879429?alt=media&token=c2f23541-c75b-4a09-aa01-e29275fcabe1`;
        // let audio_url = `https://www2.cs.uic.edu/~i101/SoundFiles/CantinaBand60.wav`;
        let audio_url = selectedRecord.audio;
        return (
            <CustomPodcast
                heading={audio_heading}
                title={audio_title}
                description={audio_description}
                url={audio_url}
                posterImage={audio_posterImage}
                onClose={() => setSelected("")}
                onReview={() => {
                    onNextFunction();
                }}
            />
        );
    }
    if (
        prodcastData.loading ||
        activityData.loading ||
        videoData.loading ||
        blogData.loading
    )
        return (
            <Flex justify="center" align="center" minH="100vh" w="100%">
                <Stack spacing={4} p={8} borderRadius="lg">
                    <Spinner
                        thickness="4px"
                        speed="0.65s"
                        emptyColor="gray.200"
                        color="navy"
                        size="xl"
                    />
                </Stack>
            </Flex>
        );

    return (
        <Stack
            spacing={"30px"}
            p={"24px"}
            bg="#F9FCFC"
            alignItems={"center"}
            w="100%"
        >
            <Stack spacing={"16px"} w="100%" alignItems={"left"}>
                <Stack
                    h="44px"
                    w="44px"
                    borderRadius={"100px"}
                    bg="white"
                    boxShadow={"lg"}
                    justifyContent={"center"}
                    alignItems={"center"}
                    onClick={signOut}
                >
                    <Image w="22.55px" h="27.61px" src={topIcon}/>
                </Stack>
                <Text
                    color="rgba(5, 30, 97, 1)"
                    opacity={"72%"}
                    fontSize="24px"
                    fontFamily={"ABC"}
                    fontStyle="normal"
                    fontWeight="700"
                    lineHeight="33.6px"
                    textAlign={"left"}
                    letterSpacing="0.05px"
                >
                    Today's Content
                </Text>
            </Stack>
            <Stack py={"10px"} spacing={"20px"} alignItems={"center"} w="100%">
                {blogData.data.posts.map((blog: any) => {
                    return (
                        <BabuActivityCard
                            activity={"Blog"}
                            activityDetails={`${blog.title}`}
                            activityImage={babyPlaying2}
                            OnClick={() => {
                                onBlog(blog);
                                // console.log(blog);
                            }}
                        />
                    );
                })}
                {prodcastData.data.babbu_podcast.map((podcast: any) => {
                    return (
                        <BabuActivityCard
                            activity={"Podcast"}
                            activityDetails={podcast.title}
                            activityImage={podcast.poster_image}
                            OnClick={() => {
                                // console.log(activity);
                                onPodcast(podcast);
                            }}
                        />
                    );
                })}
                {videoData.data.babbu_video.map((video: any) => {
                    return (
                        <BabuActivityCard
                            activity={"Video"}
                            activityDetails={video.title}
                            activityImage={video.poster_image}
                            OnClick={() => {
                                // console.log("activty")
                                // console.log(activity);
                                onVideo(video);
                            }}
                        />
                    );
                })}
                {activityData.data.babbu_activities_library.map((activity: any) => {
                    return (
                        <BabuActivityCard
                            activity={"Activity"}
                            activityDetails={activity.activity_name}
                            activityImage={activity.activity_screen_1_image_video}
                            OnClick={() => {
                                setActivityId(activity.new_activity_id);
                                console.log(activity);
                            }}
                        />
                    );
                })}

                {/* {activityId != -1 && <ActivityScreens id={activityId} />} */}
            </Stack>
        </Stack>
    );
};

export default BabuAllActivity;