import {FC, FormEventHandler} from 'react'
import styled from 'styled-components'
import {Session} from '@auth0/nextjs-auth0'
import {models} from '@tonality/library-common'
import CreateRingtoneForm from '../../organisms/forms/CreateRingtone'
import BasicLayout from '../../organisms/presentation/BasicLayout';

const Padding = styled('div')({
	margin: '2rem 0',
})

type Props = {
	onSearch?: FormEventHandler,
	onSubmit?: FormEventHandler,
	session: Partial<Session>,
	currentRingtone?: models.Ringtone,
	updateTempo?: ({ songRef, dataRef, setTempo, }) => (...args: unknown[]) => void,
	updateView?: ({ setNoteGlyph, setRestGlyph, noteGlyphs, restGlyphs, }) => (...args: unknown[]) => void,
	addRest?: ({ formRef, dataRef, songRef, }) => (...args: unknown[]) => void,
	addNote?: ({ dataRef, formRef, songRef, soundManagerRef, }) => (...args: unknown[]) => void,
	togglePlayback?: ({ formRef, songRef, soundManagerRef, setPlayTimestamp, setPlaying, }) => (...args: unknown[]) => void,
	updateSong?: ({ formRef, songRef, }) => (...args: unknown[]) => void,
	play?: ({ dataRef, playing, setPlaying, playTimestamp, }) => void,
}

const CreateRingtoneTemplate: FC<Props> = ({
	onSearch,
	onSubmit,
	session,
	currentRingtone = {},
	updateTempo,
	updateView,
	addRest,
	addNote,
	togglePlayback,
	updateSong,
	play,
}) => {
	return (
		<BasicLayout
			onSearch={onSearch}
			session={session}
		>
			<Padding>
				<CreateRingtoneForm
					onSubmit={onSubmit}
					defaultValues={{
						...currentRingtone,
						composerUserSub: session.user.sub,
					}}
					action="/api/a/create/ringtone"
					labels={{
						form: 'Create Ringtone',
						name: 'Name',
						data: 'Data',
						cta: 'Post',
					}}
					updateTempo={updateTempo}
					updateView={updateView}
					addRest={addRest}
					addNote={addNote}
					togglePlayback={togglePlayback}
					updateSong={updateSong}
					play={play}
				/>
			</Padding>
		</BasicLayout>
	)
}

export default CreateRingtoneTemplate