import { Link } from 'react-router-dom'
import { MediaList } from '../components/MediaList'
import { useJellyfinArtistsData } from '../hooks/Jellyfin/Infinite/useJellyfinArtistsData'
import { usePullToRefresh } from '../hooks/usePullToRefresh'
import { PullToRefreshIndicator } from '../components/PullToRefreshIndicator'
import { useScrollRestore } from '../hooks/useScrollRestore'

export const Artists = () => {
    const { items, infiniteData, isLoading, error, reviver, loadMore, refetch } = useJellyfinArtistsData()
    const { containerRef, isRefreshing, pullDistance, refreshThreshold } = usePullToRefresh({ onRefresh: refetch })
    // Restore scroll position when navigating back to Artists
    useScrollRestore(containerRef as unknown as React.MutableRefObject<HTMLElement | null>, 'artists')

    return (
        <div
            className="artists-page"
            ref={containerRef}
            style={{
                transform: pullDistance ? `translateY(${Math.min(pullDistance, 120)}px)` : undefined,
                transition: isRefreshing || pullDistance === 0 ? 'transform 200ms ease' : 'none',
                willChange: 'transform'
            }}
        >
            {(pullDistance > 0 || isRefreshing) && (
                <div style={{ position: 'sticky', top: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', height: 60, marginTop: -60, opacity: 0.98, color: 'var(--text-primary, #fff)' }}>
                    <div
                        onClick={!isRefreshing ? (() => { void refetch(); }) : undefined}
                        title={!isRefreshing ? 'Refresh' : undefined}
                        aria-label={!isRefreshing ? 'Refresh' : undefined}
                        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, pointerEvents: 'auto', cursor: !isRefreshing ? 'pointer' : 'default' }}
                    >
                        <PullToRefreshIndicator pullDistance={pullDistance} threshold={refreshThreshold} refreshing={isRefreshing} />
                    </div>
                </div>
            )}
            {error && <div className="error">{error}</div>}
            <div className="album-artists">
                <Link to="/albumartists" className="textlink">
                    View album artists
                </Link>
            </div>
            <MediaList
                items={items}
                infiniteData={infiniteData}
                isLoading={isLoading}
                type="artist"
                title={'Artists'}
                reviver={reviver}
                loadMore={loadMore}
                hidden={{ view_artist: true }}
            />
        </div>
    )
}