export const WithLoadingState = () => {
	const [ isLoading, setIsLoading ] = useState( true );
	const [ view, setView ] = useState< View >( {
		...DEFAULT_VIEW,
		fields: [ 'id', 'title', 'body', 'userId', 'categories', 'date' ],
	} );
	const [ displayData, setDisplayData ] = useState< typeof data >( [] );

	useEffect( () => {
		const fetchData = async () => {
			setIsLoading( true );
			try {
				const response = await fetch(
					'https://jsonplaceholder.typicode.com/posts'
				);
				if ( ! response.ok ) {
					throw new Error( 'Failed to fetch data' );
				}
				const posts = await response.json();
				// Transform the API data to match our data structure
				const transformedData = posts.map( ( post: any ) => ( {
					id: post.id,
					title: post.title,
					userId: post.userId,
					date: new Date(
						Date.now() - Math.random() * 10000000000
					).toISOString(),
				} ) );
				setDisplayData( transformedData );
			} catch ( error ) {
				console.error( 'Error fetching data:', error );
			} finally {
				setIsLoading( false );
			}
		};

		fetchData();
	}, [] );

	const { data: shownData, paginationInfo } = useMemo( () => {
		return filterSortAndPaginate( displayData, view, fields );
	}, [ displayData, view ] );

	const handleViewChange = async ( newView: View ) => {
		setView( newView );
		setIsLoading( true );
		try {
			// Simulate API delay when filters change
			await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
		} finally {
			setIsLoading( false );
		}
	};

	return (
		<DataViews
			getItemId={ ( item ) => item.id.toString() }
			paginationInfo={ paginationInfo }
			data={ shownData }
			view={ view }
			fields={ [
				{
					id: 'id',
					label: 'ID',
					enableSorting: true,
					enableHiding: true,
				},
				{
					id: 'title',
					label: 'Title',
					enableSorting: true,
					enableHiding: true,
				},
				{
					id: 'userId',
					label: 'User ID',
					enableSorting: true,
					enableHiding: true,
				},
				{
					id: 'date',
					label: 'Date',
					enableSorting: true,
					enableHiding: true,
				},
			] }
			onChangeView={ handleViewChange }
			actions={ actions }
			isLoading={ isLoading }
			keepPreviousData
			defaultLayouts={ defaultLayouts }
			search={ true }
			onChangeSelection={ ( selection ) => {
				console.log( 'selection', selection );
			} }
			searchLabel="Search posts..."
		/>
	);
};