import {FC, FormEventHandler} from 'react';
import styled from 'styled-components';
import { LeftSidebarWithMenu } from '@theoryofnekomata/viewfinder'
import Link from '../../molecules/navigation/Link';
import {Session} from '@auth0/nextjs-auth0';
import {models} from '@tonality/library-common';
import RingtoneCardDisplay from '../../organisms/presentation/RingtoneCardDisplay';
import Card from '../../molecules/presentation/Card';
import ActionButton from '../../molecules/forms/ActionButton';
import NumericInput from '../../molecules/forms/NumericInput';
import BasicLayout from '../../organisms/presentation/BasicLayout';

const CardList = styled('div')({
	display: 'grid',
	gap: '1rem',
	margin: '2rem 0',
	'@media (min-width: 720px)': {
		gridTemplateColumns: 'repeat(2, 1fr)',
	},
})

const CardLink = styled(Link)({
	display: 'block',
	textDecoration: 'none',
})

const StyledCard = styled(Card)({
	height: '100%',
})

const Footer = styled('div')({
	display: 'grid',
	gap: '1rem',
	gridTemplateColumns: '1fr',
	margin: '2rem 0',
	'@media (min-width: 720px)': {
		gridTemplateColumns: 'auto 1fr auto',
	},
})

const TakeForm = styled('form')({
	display: 'grid',
	gap: '1rem',
	gridTemplateColumns: '1fr auto',
})

const BrowseArea = styled('div')({
	'@media (min-width: 720px)': {
		gridColumn: 3,
	},
})

const TakeInput = styled(NumericInput)({
	'@media (min-width: 720px)': {
		width: '6rem',
	},
})

type Props = {
	onSearch?: FormEventHandler,
	onNextPage?: FormEventHandler,
	session?: Partial<Session>,
	ringtones: models.Ringtone[],
	skip?: number,
	take?: number,
	total?: number,
	loading?: boolean,
}

const BrowseRingtonesTemplate: FC<Props> = ({
	onSearch,
	session,
	ringtones,
	skip = 0,
	take = 10,
	total = 0,
	onNextPage,
	loading,
}) => {
	return (
		<BasicLayout
			onSearch={onSearch}
			session={session}
		>
			<LeftSidebarWithMenu.ContentContainer>
				{
					Array.isArray(ringtones)
					&& (
						<>
							<CardList>
								{ringtones.map(r => (
									<CardLink
										key={r.id.toString()}
										href={{
											pathname: '/ringtones/[id]',
											query: {
												id: r.id.toString(),
											},
										}}
									>
										<StyledCard>
											<RingtoneCardDisplay
												name={r.name}
												data={r.data}
												createdAt={r.createdAt}
											/>
										</StyledCard>
									</CardLink>
								))}
							</CardList>
							<Footer>
								<TakeForm>
									<TakeInput
										label="Visible Items"
										name="take"
										defaultValue={take}
									/>
									<ActionButton
										type="submit"
										disabled={loading}
									>
										Set
									</ActionButton>
								</TakeForm>
								<BrowseArea>
									{
										skip + take < total
										&& (
											<form
												onSubmit={onNextPage}
											>
												<input
													type="hidden"
													name="skip"
													value={skip + take}
												/>
												<input
													type="hidden"
													name="take"
													value={take}
												/>
												<ActionButton
													type="submit"
													disabled={loading}
													block
												>
													Browse More
												</ActionButton>
											</form>
										)
									}
								</BrowseArea>
							</Footer>
						</>
					)
				}
			</LeftSidebarWithMenu.ContentContainer>
		</BasicLayout>
	)
}

export default BrowseRingtonesTemplate