import React from "react";
import {Flex, Image, Spinner, Stack, Text,} from "@chakra-ui/react";
import {BabuActivityCard} from "./CustomComponents";
import {gql, useQuery} from "@apollo/client";

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_ACTIVITY = gql`
query MyQuery {
    babbu_activities_library {
      activity_name
      activity_screen_1_cta_image_video
      activity_screen_1_image_video
      age_group_id
    }
  }`

const BabuActivity = () => {
    const prodcastData = useQuery(GET_ACTIVITY);
    if (prodcastData.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"}
                >
                    <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%">
                {prodcastData.data.babbu_activities_library.map((activity: any) => {
                    return (
                        <BabuActivityCard
                            activity={"Activity"}
                            activityDetails={activity.activity_name}
                            activityImage={activity.activity_screen_1_image_video}
                            OnClick={() => {
                                console.log(activity.age_group_id);
                            }}
                        />
                    );
                })}
            </Stack>
        </Stack>
    );
};

export default BabuActivity;