import { Suspense } from "react";
import { ImageCard } from "./ImageCard";
import Skeleton from 'react-loading-skeleton';
import React from "react";
import { QueryErrorResetBoundary, useQuery, useSuspenseQuery } from "@tanstack/react-query";
import { __, CouponsPlus, urls } from "./globals";
import {ErrorBoundary} from 'react-error-boundary'
import { useAtomValue } from "jotai";
import { PermissionToLoadRemoteAtom } from "./tree/atoms";
import { PresetsHaveNoPermissionToLoad } from "./tree/sections/PresetsHaveNoPermissionToLoad";
export function CardSkeleton({ imageHeight = 420 }) {
  return (
    <div className="grid grid-cols-1 gap-3 --p-3 --rounded-1 --bg-gray-150/20">
      <div className="space-y-1">
        <h1 className="text-1x">
          <Skeleton width="60%" height={16} borderRadius={9} />
        </h1>
        <p className="text-smaller-1">
          <Skeleton count={2} borderRadius={7} height={10}/>
        </p>
      </div>
      <div>
        <Skeleton 
          height={imageHeight} 
          className="w-full block leading-none" 
          borderRadius={22} 
        />
      </div>
    </div>
  );
}

export type ExamplesData = {
    title: string,
    description?: string,
    image: {
        name: 'string',
        width: number,
        height: number,
    }
}
const Examples = ({type}: {type: string}) => {
    const { data, error } = useSuspenseQuery<ExamplesData[]>({
            queryKey: [`examples-${type}`],
            queryFn: async () => {
                const url = new URL((window as any).CouponsPlus.urls.rest.docs.examples.replaceAll('$1', type));
    
                url.searchParams.append('prod_id', CouponsPlus.WooCommerce.prod_id.toString())
    
                const res = await fetch(url, {
                    headers: {
                        'X-WP-Nonce': (window as any).CouponsPlus.security.nonces.rest
                    }
                });
                if (!res.ok) {
                    const body = await new Response(res.body).text()
                    throw new Error(`HTTP error! status: ${res.status}. data: ${body}`);
                }
    
                // WordPress REST API returns JSON object, we need to convert it back to an array
                return res.json();
            }
        })

    const getImageURL = (imageFile: string): string => {
        const url = new URL(urls.rest.docs.examples_images.replace(':type', type).replace(':image', imageFile))

        url.searchParams.append('site', urls.site)

        return url.toString()
    }

    return data.map(({title, description, image}) => (
            <div className="grid grid-cols-1 gap-3 --p-3 --rounded-1 --bg-gray-150/20">
                <div>
                    <h1 className="text-1x text-gray-700/70">{title}</h1>
                    {description && (
                    <p className="text-smaller-1 text-gray-700/[.45]" style={{ textWrap: 'pretty' }}>
                        {description}
                    </p>
                    )}
                </div>
                <ImageCard
                src={getImageURL(image.name)}
                    alt="Example image."
                    width={image.width}
                    height={image.height}
                />
            </div>
        ))
}

export const ExamplesSection = ({type}: {type: string}) => {
    const havePermissionToLoad = useAtomValue(PermissionToLoadRemoteAtom);
    
    if (!havePermissionToLoad) {
        return <PresetsHaveNoPermissionToLoad 
            decoration={<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="min-w-8 max-w-8 min-h-8 max-h-8">
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
            </svg>
            }
                    title={__("Learn by example")} 
                    description={[ 
                        __("Explore dozens of common examples to see what's possible and better understand how the Coupons+ works."),
                        __('This is a free service and it\'s optional to use. Connecting to our APIs does not send any personal user data to us. You can revoke this at any time.')
                    ]} 
                    size="smaller"
        />
    }

    return <div className="grid grid-cols-1 gap-8">
        <ErrorBoundary fallbackRender={({error}) => (
            <div className="pt-2 py-8 select-all space-y-3">
                <h1 className="text-1x text-gray-700/50">
                    {__('Failed to load examples! If you have had this window open for long try reloading the page.')}
                </h1>
                <div className="p-2 rounded-2 bg-gray-200/20 text-gray-700/50">
                    {__('Error: ')}{error instanceof Error ? error.message : JSON.stringify(error)}
                </div>
            </div>
        )}>
            <Suspense fallback={<CardSkeleton />}>
                <Examples type={type} />
            </Suspense>
        </ErrorBoundary>
    </div>
}