import React from 'react';
import { Box, Grid, Avatar, Image, ResponsiveContext, Heading } from 'grommet';

import { Card as Album } from './Card';
import { Artists } from '../interfaces';
import { size } from 'lodash';

export const Results = ({ artists }: { artists: Artists }) => {
	const {
		name: selectedName,
		image: selectedImage,
		albums: selectedAlbums,
	} = artists[0];

	return (
		<Grid
			rows={['fit', 'fit']}
			columns={['1/4', '3/4']}
			gap='small'
			areas={[
				['artist', 'other'],
				['discography', 'discography'],
			]}
		>
			<Box gridArea='artist' height='300px' >
				<h1>{selectedName}</h1>
				<Image src={selectedImage} fit='cover' />
			</Box>
			<Box gridArea='other' background='light-2'>
				<h3>Other results</h3>
				{artists.map((artist) => (
					<Box gridArea='artist' key={artist.id}>
						<Avatar src={artist.image} />
						<h4>{artist.name}</h4>
					</Box>
				))}
			</Box>
			<ResponsiveContext.Consumer>
				{(size) => (
					<Grid
						gridArea='discography'
						align='start'
						columns={{ count: 'fill', size: '300px' }}
						gap='medium'
					>
						<Heading level='1'>
							Discography
						</Heading>
						{selectedAlbums.map((album) => (
							<Album
								key={album.id}
								image={album.image}
								name={album.name}
							/>
						))}
					</Grid>
				)}
			</ResponsiveContext.Consumer>
		</Grid>
	);
};