import React from 'react';
import { DOMAttributes, FocusableElement } from '@react-types/shared';
import { Error } from '@squiz/resource-browser-ui-lib';
import { Spinner, SdsIcon, ICON_CLOSE } from '@squiz/sds';

export type InlineLoadingErrorStateProps = {
    title: string;
    titleAriaProps: DOMAttributes<FocusableElement>;
    onClose: () => void;
    onRetry: () => void;

    isLoading: boolean;
    error: Error | null;
};

export const InlineLoadingErrorState = ({ title, titleAriaProps, onClose, onRetry, isLoading, error }: InlineLoadingErrorStateProps) => {
    return (
        <div className="relative flex flex-col h-full text-gray-800">
            <div className="flex items-center py-3 pl-6 pr-10 min-h-[68px]">
                <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
                    {title?.charAt(0).toUpperCase() + title?.slice(1).toLowerCase()}
                </h2>
                <button className="sds-dialog__close" aria-label={`Close ${title} dialog`} onClick={onClose} tabIndex={0}>
                    <span className="sr-only">{`Close ${title} dialog`}</span>
                    <SdsIcon svg={ICON_CLOSE} />
                </button>
            </div>
            <div className="border-t border-gray-300 overflow-y-hidden">
                <div className="w-screen max-w-[400px] min-h-[320px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4 flex justify-center items-center text-gray-500">
                    {isLoading && <Spinner type="lg" />}

                    {!isLoading && error && (
                        <Error
                            onReset={onRetry}
                            infoText={
                                'There was a problem loading this feature. If this problem persists, contact your administrator or support team.'
                            }
                            buttonText={'Try again'}
                        />
                    )}
                </div>
            </div>
        </div>
    );
};