"use client";

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import {CurrencySwitch} from "@/components/common/CurrencySwitch/CurrencySwitch";
import makeClient from "@/lib/ApolloClientBrowser";

import { GET_CART_ITEM,GET_FILTER_ATTRIBUTES,CREATE_APPLY_COUPON } from "@/graphql";
import { useMutation, useLazyQuery } from "@apollo/client/react";
import {handleApolloBusinessError} from "@/lib/ApolloErrorHandler";
import { useCustomToast } from "@/utils/hooks/useToast";
// interface ImageCarouselProps {
//     options: {
//         images: {
//             image: string;
//             link: string;
//             title?: string;
//         }[];
//     };
// }
export default function HomeImageBanner() {
  const { showToast } = useCustomToast();
  const apolloClient = makeClient();
  // const res = useQuery(GET_COUNTRY_STATES, {
  //         variables: {
  //             countryId: 1000
  //         }
  //     });
  //     console.log('query state --- res', res);
  const ttt = async () => {
    try {
      const res = await apolloClient.mutate({
        mutation: GET_CART_ITEM,
        fetchPolicy: 'network-only', // 按需调整
      });
      console.log('----------',res);
    } catch(error) {
      console.log('ttt----------',error);
      handleApolloBusinessError(error,(err) => {
          showToast(err.message, "danger");
      });
    }  
  }
  // 76|nlq9qGztR7qmSS72Kal56NCjhRRVrLCeVOdZdLLYa2c769e9
const [getContent] = useLazyQuery(GET_FILTER_ATTRIBUTES,{
        fetchPolicy: 'network-only'
    });

  const testLazyQuery = async () => { 
      try {
            const result = await getContent();
            console.log('lazy query res---', result);
      } catch(err) {
          console.log('lazy query ---- ', err);
      }
  }

    // useMutation
    


    const [mutateAsync] = useMutation(
        GET_CART_ITEM,
        {
          onCompleted: (res) => {
            console.log('useMutation onCompleted res ----- 0',res);
          },
    
          onError: (err) => {
            console.log('useMutation onCompleted err ----- 0',err);
          },
        },
      );


    const testMutation = async () => { 
        
            const res = await mutateAsync();
        console.log('testMutation ---',res)
        
    };
    const testFilter= () => {
            return apolloClient.query({
                query: GET_FILTER_ATTRIBUTES,
                fetchPolicy: "no-cache",
                context: {
                    fetchOptions: {
                        cache: 'no-store',
                    },
            
                },
                // variables: {
                //     orderId: Number(orderid)
                // }
            }).then((res) => {
                
                console.log('testFilter res ---- ',res);
            
            
            }).catch((err) => {
                console.error('testFilter error ---- ',err);
                handleApolloBusinessError(err,(error) => {
          showToast(error.message, "danger");
      });
            });
        };
    
        const testApplyCoupon = async () => { 
            try {
                await apolloClient.mutate({
                    mutation: CREATE_APPLY_COUPON,
                    variables: {
                        couponCode: 'BIRTHDAY20'
                    },
                    fetchPolicy: 'network-only', // 按需调整
                });
            } catch (err) {
                console.log('testApplyCoupon error ---- ',err);
            }
        };
  
  return (
    <>
    <p>
      <button onClick={ttt}>get cart detail</button>
    </p>

    <p><button onClick={testLazyQuery}>testLazyQuery</button></p>
    <p><button onClick={testMutation}>testMutation</button></p>
    <p><button onClick={testFilter}>testFilter</button></p>
    <p><button onClick={testApplyCoupon}>testApplyCoupon</button></p>
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
    <CurrencySwitch/>
    </>
  )
}