---
import { actions, isInputError } from 'astro:actions'

import Button from '../../components/Button.astro'
import InputImageFile from '../../components/InputImageFile.astro'
import InputText from '../../components/InputText.astro'
import { karmaUnlocksById } from '../../constants/karmaUnlocks'
import MiniLayout from '../../layouts/MiniLayout.astro'
import { makeKarmaUnlockMessage } from '../../lib/karmaUnlocks'
import { makeLoginUrl } from '../../lib/redirectUrls'

const user = Astro.locals.user
if (!user) {
  return Astro.redirect(makeLoginUrl(Astro.url, { message: 'Login to edit your profile' }))
}

const result = Astro.getActionResult(actions.account.update)
if (result && !result.error) {
  return Astro.redirect('/account')
}
const inputErrors = isInputError(result?.error) ? result.error.fields : {}
---

<MiniLayout
  pageTitle={`Edit Profile - ${user.displayName ?? user.name}`}
  description="Edit your user profile"
  ogImage={{ template: 'generic', title: 'Edit Profile', icon: 'ri:user-settings-line' }}
  layoutHeader={{
    icon: 'ri:edit-line',
    title: 'Edit profile',
    subtitle: 'Update your account information',
  }}
  breadcrumbs={[
    {
      name: 'Accounts',
      url: '/account',
    },
    {
      name: 'Edit profile',
    },
  ]}
>
  <form method="POST" action={actions.account.update} class="space-y-4" enctype="multipart/form-data">
    <input transition:persist type="hidden" name="id" value={user.id} />

    <InputText
      label="Display Name"
      name="displayName"
      error={inputErrors.displayName}
      inputProps={{
        value: user.displayName,
        maxlength: 100,
        disabled: !user.karmaUnlocks.displayName,
      }}
      description={!user.karmaUnlocks.displayName
        ? `${makeKarmaUnlockMessage(karmaUnlocksById.displayName)} [Learn more](/docs/karma)`
        : undefined}
    />

    <InputText
      label="Website URL"
      name="link"
      error={inputErrors.link}
      inputProps={{
        value: user.link,
        type: 'url',
        placeholder: 'https://example.com',
        disabled: !user.karmaUnlocks.websiteLink,
      }}
      description={!user.karmaUnlocks.websiteLink
        ? `${makeKarmaUnlockMessage(karmaUnlocksById.websiteLink)} [Learn more](/docs/karma)`
        : undefined}
    />

    <InputImageFile
      label="Profile Picture"
      name="pictureFile"
      value={user.picture}
      error={inputErrors.pictureFile}
      square
      disabled={!user.karmaUnlocks.profilePicture}
      description={!user.karmaUnlocks.profilePicture
        ? `${makeKarmaUnlockMessage(karmaUnlocksById.profilePicture)} [Learn more](/docs/karma)`
        : undefined}
      removeCheckbox={user.picture
        ? {
            name: 'removePicture',
            label: 'Remove profile picture',
          }
        : undefined}
    />

    <Button
      type="submit"
      icon="ri:save-line"
      label="Save"
      color="success"
      shadow
      size="md"
      class="mt-4 w-full"
    />
  </form>
</MiniLayout>