import { Badge, HStack, Stack, Text, VStack } from "@chakra-ui/react";
import { useGetPrivacyPolicyQuery } from "../../../Redux/Service/privacy.policy.service";
import MainFrame from "../../../components/MainFrame";
import { Spinner } from "../../../components/Sipnner/Spinner";
import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useContext, useEffect } from "react";

const PrivacyPolicy = () => {
  const { data, isLoading, isFetching, refetch } = useGetPrivacyPolicyQuery();

  console.log("PRIVACY", data?.data);

  const context = useContext(GlobalStateContext);
  if (!context)
    throw new Error("App must be used within a GlobalStateProvider");

  const { setIsBarLoading } = context;
  useEffect(() => {
    setIsBarLoading(isFetching);
  }, [data]);

  console.log("Privacy Policy Data:", data?.data);

  return (
    <MainFrame transperant={true}>
      <Stack bg={"#fff"} w={"100%"} p={4} borderRadius={4} mb={4}>
        <Text color={"black"} textAlign={"left"} fontWeight={"600"}>
          Privacy Policy
        </Text>
      </Stack>
      <VStack gap={4} pb={4} pt={0}> 
        {isLoading || isFetching ? (
          <Spinner />
        ) : (
          data?.data?.map(({ id, content, privacy_language }) => (
            <VStack
              bg={"#fff"}
              boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
              rounded={"lg"}
              p={3}
              key={id}
            >
              <HStack w={"100%"} justifyContent={"space-between"} py={0} px={0}>
                <Text
                  as={"span"}
                  fontSize={"sm"}
                  fontWeight={500}
                  color={"#000"}
                >
                  <Badge
                    variant={"surface"}
                    colorPalette="cyan"
                    size={"sm"}
                    fontSize={"xs"}
                    px={2}
                  >
                    🎓 {privacy_language?.language_name}
                  </Badge>
                </Text>

                <PrivacyPolicyAddModel
                  policyData={{ id, content, privacy_language }}
                  refetch={refetch}
                />
              </HStack>
              <Text
                as="p"
                fontSize="sm"
                fontWeight={400}
                color="#1D1D1D"
                dangerouslySetInnerHTML={{ __html: content }}
              />
            </VStack>
          ))
        )}
      </VStack>
    </MainFrame>
  );
};

export default PrivacyPolicy;
