tonality/packages/app-web/src/components/templates/CreateRingtone/index.tsx

import {FC, FormEventHandler} from 'react'
import styled from 'styled-components'
import { LeftSidebarWithMenu } from '@theoryofnekomata/viewfinder'
import {models} from '@tonality/library-common'
import CreateRingtoneForm from '../../organisms/forms/CreateRingtone'
import Link from '../../molecules/navigation/Link'
import OmnisearchForm from '../../organisms/forms/Omnisearch'
import Brand from '../../molecules/brand/Brand'

const TopBarComponent = styled('div')({
	backgroundColor: 'var(--color-bg, white)',
})

const SidebarMenuComponent = styled('div')({
	backgroundColor: 'var(--color-bg, white)',
})

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

type Props = {
	onSearch?: FormEventHandler,
	onSubmit?: FormEventHandler,
	composer: models.Composer,
	currentRingtone?: models.Ringtone,
	composerRingtones: 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,
	composer,
	currentRingtone = {},
	composerRingtones = [],
	updateTempo,
	updateView,
	addRest,
	addNote,
	togglePlayback,
	updateSong,
	play,
}) => {
	return (
		<LeftSidebarWithMenu.Layout
			brand={
				<Brand />
			}
			userLink={
				<div>
					User
				</div>
			}
			topBarComponent={TopBarComponent}
			sidebarMenuComponent={SidebarMenuComponent}
			topBarCenter={
				<OmnisearchForm
					labels={{
						form: 'Search',
						query: 'Query',
					}}
					onSubmit={onSearch}
					action="/api/a/search"
				/>
			}
			linkComponent={({ url, icon, label, }) => (
				<Link
					href={url}
				>
					<LeftSidebarWithMenu.SidebarMenuContainer>
						<LeftSidebarWithMenu.SidebarMenuItemIcon>
							{icon}
						</LeftSidebarWithMenu.SidebarMenuItemIcon>
						{label}
					</LeftSidebarWithMenu.SidebarMenuContainer>
				</Link>
			)}
			moreLinkMenuItem={{
				label: 'More',
				icon: 'M',
				url: {},
			}}
			moreLinkComponent={({ url, icon, label, }) => (
				<Link
					href={url}
				>
					<LeftSidebarWithMenu.MoreSidebarMenuContainer>
						<LeftSidebarWithMenu.MoreSidebarMenuItemIcon>
							{icon}
						</LeftSidebarWithMenu.MoreSidebarMenuItemIcon>
						{label}
					</LeftSidebarWithMenu.MoreSidebarMenuContainer>
				</Link>
			)}
			sidebarMenuItems={[
				{
					id: 'browse',
					label: 'Browse',
					icon: 'B',
					url: {
						pathname: '/ringtones',
					},
				},
				{
					id: 'compose',
					label: 'Compose',
					icon: 'C',
					url: {
						pathname: '/my/create/ringtone',
					},
				},
			]}
		>

			<Padding>
				<CreateRingtoneForm
					onSubmit={onSubmit}
					defaultValues={{
						...currentRingtone,
						composerId: composer.id,
					}}
					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>
		</LeftSidebarWithMenu.Layout>
	)
}

export default CreateRingtoneTemplate