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

import { Album } from './Album';
import { Artists } from '../interfaces';
import { Other } from './Other';

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

	return (
		<Grid
			as='section'
			rows={['fit', 'fit']}
			columns={['fit', '2/3']}
			gap='small'
			areas={[
				['artist-title', 'other-title'],
				['artist', 'other'],
				['disco-title', 'disco-title'],
				['discography', 'discography'],
			]}
		>
			<Heading
				level='1'
				gridArea='artist-title'
				margin={{ vertical: 'none' }}
			>
				{selectedName}
			</Heading>
			<Grid
				gridArea='artist'
				margin={{ bottom: 'medium' }}
			>
				<Box
					round='full'
					background={{
						repeat: 'no-repeat',
						size: 'cover',
						image: `url(${selectedImage})`,
					}}
					height='300px'
					width='300px'
				/>
			</Grid>
			<Heading
				level='2'
				gridArea='other-title'
				margin={{ vertical: 'none' }}
				alignSelf='end'
				size="small"
			>
				Other results
			</Heading>
			<ResponsiveContext.Consumer>
				{(size) => (
					<Box gridArea='other' direction='row' wrap>
						{artists.slice(1, artists.length).map((artist) => (
							<Other
								key={artist.id}
								image={artist.image}
								name={artist.name}
							/>
						))}
					</Box>
				)}
			</ResponsiveContext.Consumer>
			<Heading level='2' gridArea='disco-title' size='large'>
				Discography
			</Heading>
			<ResponsiveContext.Consumer>
				{(size) => (
					<Grid
						gridArea='discography'
						align='start'
						columns={{ count: 'fill', size: '300px' }}
						gap='large'
					>
						{selectedAlbums.map((album) => (
							<Album
								key={album.id}
								image={album.image}
								name={album.name}
							/>
						))}
					</Grid>
				)}
			</ResponsiveContext.Consumer>
		</Grid>
	);
};