---
import { AlbumStatus } from '@prisma/client'
import AsyncMultiSelect from 'components/form/AsyncMultiSelect'
import { Input, InputArea, InputLabel, InputSelect } from 'components/form/Input'
import Base from 'layouts/base.astro'
import prismaClient from 'utils/prisma-client'

const { user, permissions } = Astro.locals
if (!user || !permissions.includes('UPDATE')) return Astro.redirect('/404')

const albumId = parseInt(Astro.params.id as string)
const album = await prismaClient.albums.findUnique({ where: { id: albumId } })

if (!album) {
  return Astro.redirect('/404')
}
---

<!-- 

          discs: { createMany: { data: body.discs } },
          relatedAlbums: { create: body.related.map((id) => ({ relatedAlbum: { connect: { id } } })) } -->
<Base>
  <div class='flex flex-col w-full'>
    <div class='w-full min-h-100vh mx-auto max-w-[1140px]'>
      <div class='mt-4 p-4 bg-dark rounded-md mx-2'>
        <div class='grid grid-cols-4 gap-4'>
          <Input dark defaultValue={album.title} name='title' label='Title' />
          <Input dark defaultValue={album.subTitle} name='subTitle' label='Subtitle' />
          <Input
            dark
            defaultValue={album.releaseDate?.toISOString().slice(0, 10)}
            name='releaseDate'
            type='date'
            label='Release Date'
          />
          <Input dark defaultValue={album.label} name='label' label='Label' />
          <Input dark defaultValue={album.vgmdb} name='vgmdb' label='VGMDB' />
          <Input dark defaultValue={album.description} name='description' label='Description' />
          <InputSelect dark name='status' label='Status'>
            <option value={AlbumStatus.HIDDEN} selected={album.status === AlbumStatus.HIDDEN}>Hidden</option>
            <option value={AlbumStatus.SHOW} selected={album.status === AlbumStatus.SHOW}>Show</option>
          </InputSelect>
          <div class='flex flex-col'>
            <InputLabel dark name='animations'>Animations</InputLabel>
            <AsyncMultiSelect
              client:only='react'
              name='animations'
              url='/api/anim/find'
              nameColumn='title'
              className='rounded-md py-2 h-full'
            />
          </div>
          <InputArea dark defaultValue={album.description} name='artists' label='Artists' />
          <InputSelect dark name='categories' label='Categories'>
            <option value='Game' selected={album.status === AlbumStatus.HIDDEN}>Game</option>
            <option value='Animation' selected={album.status === AlbumStatus.SHOW}>Animation</option>
          </InputSelect>
          <InputSelect dark name='classifications' label='Classifications'>
            <option value='Arrangement'>Arrangement</option>
            <option value='Drama'>Drama</option>
            <option value='GameRip'>GameRip</option>
            <option value='Live Event'>Live Event</option>
            <option value='Original Soundtrack'>Original Soundtrack</option>
            <option value='Vocal'>Vocal</option>
          </InputSelect>
          <div class='flex flex-col'>
            <InputLabel dark name='games'>Games</InputLabel>
            <AsyncMultiSelect
              client:only='react'
              name='games'
              url='/api/game/find'
              valueColumn='slug'
              nameColumn='title'
              className='rounded-md py-2 h-full'
            />
          </div>
          <div class='flex flex-col'>
            <InputLabel dark name='platforms'>Platforms</InputLabel>
            <AsyncMultiSelect
              client:only='react'
              name='platforms'
              url='/api/platform/find'
              nameColumn='name'
              className='rounded-md py-2 h-full'
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</Base>